zoukankan      html  css  js  c++  java
  • javascript中手风琴特效

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul {
                list-style: none
            }
    
            * {
                margin: 0;
                padding: 0;
            }
    
            div {
                 1150px;
                height: 400px;
                margin: 50px auto;
                border: 1px solid red;
                overflow: hidden;
            }
    
            div li {
                 240px;
                height: 400px;
                float: left;
                /*background-image: url(images/1.jpg);*/
            }
    
            div ul {
                 1300px;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //找人
        var box = document.getElementById("box");
        var ul = box.children[0];
        var lis = ul.children;
        //循环遍历 lis 绑定背景图
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
            //给每一个li注册鼠标经过事件 鼠标经过后要排他
            lis[i].onmouseover = function () {
                //干掉所有人 让所有人的宽度 渐渐地 变为100
                for (var j = 0; j < lis.length; j++) {
                    animate(lis[j], {"width": 100});
                }
                //留下我自己 让我的宽度 渐渐地 变为800
                animate(this, {"width": 800});
            };
        }
        //鼠标离开box 所有的li宽度 渐渐地 变为240
        box.onmouseout = function () {
            for (var i = 0; i < lis.length; i++) {
                animate(lis[i], {"width": 240});
            }
        };
    
    
        function animate(obj, json) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //先假设 这一次执行完 所有的属性都到达目标了
                var flag = true;
                for (var k in json) {
                    var leader = parseInt(getStyle(obj, k)) || 0;
                    var target = json[k];
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader + "px";
                    //if (leader === target) {
                    //    clearInterval(obj.timer);
                    //}
                    console.log("代码还在运行");
                    if (leader != target) {
                        flag = false;//告诉标记 当前这个属性还没到达
                    }
                }
                //如果此时仍然为true 就说明真的都到达了
                if (flag) {
                    clearInterval(obj.timer);
                }
            }, 15);
        }
        //全部属性都到达目标值才能清空
        function getStyle(obj, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(obj, null)[attr];
            } else {
                return obj.currentStyle[attr];
            }
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    Golang flag包使用详解(一)
    string rune byte 的关系
    int在64位操作系统中占多少位?
    32位和64位系统区别及int字节数
    /etc/fstab修改及mkfs(e2label)相关应用与疑问
    nginx + fastcgi + c/c++
    MYSQL优化
    mysqlhighavailability
    woodmann--逆向工程
    jdaaaaaavid --github
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5894024.html
Copyright © 2011-2022 走看看