JS之手风琴效果

效果展示：

 

 

需求：鼠标放入到li中该盒子变宽，其他盒子变窄，移开大盒子，恢复原样，手风琴效果
步骤：
1.给li添加背景
2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他盒子变窄
3.移开大盒子，恢复原样

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>手风琴效果</title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1150px;
        height: 400px;
        margin: 50px auto;
        border: 1px solid red;
        overflow: hidden;
    }
    div li{
        width: 240px;
        height: 400px;
        float: left;
        cursor: pointer;
    }
    div ul{
        width: 1300px;
        list-style: none;
    }
    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
<script type="text/javascript" src="jquery1.0.0.1.js"></script>
<script>
window.onload = function(){
//需求：鼠标放入到li中该盒子变宽，其他盒子变窄，移开大盒子，恢复原样
//步骤：
//1.给li添加背景
//2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他盒子变窄
//3.移开大盒子，恢复原样



var div= document.getElementsByTagName("div")[0];
var liArr = document.getElementsByTagName("li");
//1.给li添加背景
for(var i=0;i<liArr.length;i++){
//背景图片的名称是1,2,3,4,5
liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
//2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他盒子变窄
    liArr[i].onmouseover = function(){
        //排他思想,使鼠标放置的li变宽
        for(var j=0;j<liArr.length;j++){
            animate(liArr[j],{"width":100});
        }
        animate(this,{"width":800});
}
}
//3.移开大盒子，恢复原样
div.onmouseout = function(){
for(var j=0;j<liArr.length;j++){
animate(liArr[j],{"width":240});
}
}

}
</script>
</body>
</html>

图片啥的就不上传了，自己找几张图片，修改下大小就行了

posted @ 2018-01-22 16:33  乖乖乖码  阅读(259)  评论(0)    收藏  举报