JS制作图片手风琴效果

Posted 2020-08-27

 使用JS写出 图片的手风琴效果

第一种：浮动版本的手风琴效果，并不推荐，因为会使图片出现抖动的现象

样式则是div中包含ul

<script src="animate.js"></script>
<script>

    //1. 找出页面中需要的对象
    var box = document.getElementById("box");
    var ul = box.children[0];
    var lis = ul.children;

    //2. 给ul中的li设置背景
    for (var i = 0; i < lis.length; i++) {
        var li = lis[i];
        li.style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

        //3. 给li注册onmouseover事件，这里我让当前li宽度变成800 其他100
        li.onmouseover = function () {
            // 先让所有的li变成100
            for (var i = 0; i < lis.length; i++) {
                 //引入的animate就是上次封装的简单动画
                animate(lis[i], {"width": 100});
            }
            // 让当前li宽度变成800
            animate(this, {"width": 800});
        }

        //4. 给li注册onmouseout事件,让所有的li变成240px
        li.onmouseout = function () {
            for (var i = 0; i < lis.length; i++) {
                animate(lis[i], {"width": 240});
            }
        }
    }
</script>

 

第二种：定位版本，相对较稳定

<script src="animate.js"></script>
<script>
    //找对象
    var box = document.getElementById("box");
    var ul = box.children[0];
    var lis = ul.children;
    //为li增加图片
    for(var i=0;i<lis.length;i++){
        var li = lis[i];
        li.index = i;
        li.style.backgroundImage = "url(images/"+(i+1)+".jpg)";
        li.style.left = 240*i+"px";

        //注册鼠标经过事件，鼠标经过，根据下标，计算需要移动的位置
        li.onmouseover = function () {
            var idx = this.index;
            for(var i=0;i<lis.length;i++){
                if(i<=idx){
                    animate(lis[i],{"left":100*i})
                }else{
                    animate(lis[i],{"left":100*i+700})
                }
            }
        }

        //注册鼠标离开事件
        li.onmouseout = function () {
            for(var i=0;i<lis.length;i++){
                animate(lis[i],{"left":240*i})
            }
        }
    }
</script>