孙肖宁

javascript实现手风琴的效果
描述:默认状态为几张图片显示最左侧的部分,其余部分处于隐藏的状态。鼠标经过的时候,经过的图片变宽,其余图片全部变窄...
扫描右侧二维码阅读全文
23
2018/04

javascript实现手风琴的效果

描述:默认状态为几张图片显示最左侧的部分,其余部分处于隐藏的状态。鼠标经过的时候,经过的图片变宽,其余图片全部变窄。由于变窄的速度大于图片变宽的速度。所有最右面的一个图片,在默认状态的时候,显示的要比其他部分少一些。鼠标离开之后,图片回复为原来的样子。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 1150px;
            height: 400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;
        }
        div li{
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul{
            width: 1300px;
        }
    </style>
    <script>
        window.onload = function () {
            //获取相关元素
            var div = document.getElementsByTagName("div")[0];
            var liArr = div .getElementsByTagName("li");
            //循环为每一个li添加背景图片以及添加鼠标经过事件
            for(var i = 0;i<liArr.length;i++){
                //添加图片
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
                //添加鼠标经过时候的事件
                liArr[i].onmouseover = function () {
                    for (var j = 0;j<liArr.length;j++){
                        animate(liArr[j],{"width":100});
                    }
                    animate(this,{"width":800})
                }
            }
            //鼠标离开之后,复原
            div.onmouseout = function () {
                for(var j=0;j<liArr.length;j++){
                    //引用框架实现宽度变窄
                    animate(liArr[j],{"width":240});
                }
            }
            function animate(ele,json,fn) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function () {
                    var bool = true;
                    for(var k in json){
                        var leader = parseInt(getStyle(ele,k)) || 0;
                        var step = (json[k] - leader)/10;
                        step = step>0?Math.ceil(step):Math.floor(step);
                        leader = leader + step;
                        ele.style[k] = leader + "px";
                    }
                    if(json[k] !== leader){
                        bool = false;
                    }
                    if(bool){
                        clearInterval(ele.timer);
                        if(fn){
                            fn();
                        }
                    }
                },1);
            }
            function getStyle(ele,attr) {
                if(window.getComputedStyle){
                    return window.getComputedStyle(ele,null)[attr];
                }
                return ele.currentStyle[attr];
            }
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
Last modification:April 23rd, 2018 at 10:29 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment