求html代码,点击按钮弹出层,再次点击关闭层?

点击按钮弹出层,再次点击关闭层,按钮默认图片1.jpg,鼠标放上后加载2.jpg,弹出层时加载2.jpg,求代码!

首先你要写好两条CSS,用以切换控制按钮样式(以下代码中省略宽高等声明):

.button {background:url(images/1.jpg) center no-repeat;} /* 默认样式 */
.button-hover {background-image:url(images/2.jpg);} /* 鼠标悬停及弹出层时样式 */

然后用JS来控制属性:

var oBtn = document.getElementById('btn'); // 假设按钮的id为btn
var oDiv = document.getElementById('div'); // 假设弹出层的id为div
// 鼠标悬停
oBtn.onmouseover = function() {
    oBtn.className = 'button button-hover'; 
}
// 鼠标移出
oBtn.onmouseout = function() {
    oBtn.className = 'button'; 
}
// 点击按钮
oBtn.onclick = function() {
    if (oDiv.style.display == 'none') { // 如果层是隐藏的
        oDiv.style.display = 'block';
        oBtn.className = 'button button-hover';
    } else { // 如果层是显示的
        oDiv.style.display = 'none';
        oBtn.className = 'button';
    }
}

用jQuery的话代码如下:

var oBtn = $('#btn');
var oDiv = $('#div');
oBtn.hover(function() {
        $(this).addClass('button-hover');
    }, function(){
        $(this).removeClass('button-hover');
}).click(function() {
    if (oDiv.is(':hidden')) {
        oDiv.show();
        $(this).addClass('button-hover');
    } else {
        oDiv.hide();
        $(this).removeClass('button-hover');
    }
});

温馨提示:答案为网友推荐,仅供参考
第1个回答  2015-08-11
需要用JS写追问

有具体的代码吗??