Web前端------缓动框架的封装、行内样式与内嵌样式等的获取

作者: Peak_One | 来源:发表于2018-05-24 18:10 被阅读31次

之前版本的缓动框架

原有的方法：div.style.width :这个方法比较固定，不能用变量或者字符串的形式更换属性，不方便我传值获取属性，和给属性赋值。

属性值的获取和属性的赋值
div.style["width"] = "5000px";
可以通过传字符串或者变量的方式获取和赋值属性。

缺点：它的操作完全是对行内式CSS来操作的。赋值的时候毫无问题。但是，获取值的时候有问题了。
之前版本的缓动动画框架

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>

<button>运动到200</button>
<button>运动到400</button>
<div></div>


<script>

    var btnArr = document.getElementsByTagName("button");
    var div = document.getElementsByTagName("div")[0];

    btnArr[0].onclick = function () {
        animate(div,200);
    }

    btnArr[1].onclick = function () {
        animate(div,400);
    }


    //缺点：1.只能获取行内式，不能获取内嵌和外链样式。导致我们获取left值的时候,用offsetLeft模拟
          //2.只能放入一个属性。（一个方法只能操作一个属性）
            //3.一次性放入多个属性值。


    function animate(ele,target){
        //清除定时器
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            //四部：
            //获取步长
            var step = (target - ele.offsetLeft)/10;
            //二次处理步长
            step = step>0?Math.ceil(step):Math.floor(step);
            //赋值
            ele.style.left = ele.offsetLeft + step + "px";
            //清除定时器
            console.log(1);
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },30);
    }


</script>

</body>
</html>

获取行内样式、内嵌样式、外链样式的方法介绍

只能获取行内式：（既能获取又能赋值）

div.style.width 单个赋值
div.style[“width”] 变量赋值

获取任意类型的CSS样式的属性值：（只能获取）

div.currentStyle.width; 单个获取 (IE678)
window.getComputedStyle(div,null).width;

example：
     div.currentStyle[“width”]; 变量获取 (IE678) 
     window.getComputedStyle(div,null)[“width”]; 
参数1：获取属性的元素。 
参数2：伪元素，C3学习。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background-color: pink;
            /*border: 1px solid #000;*/
            padding: 10px;
        }
    </style>
</head>
<body>

    <div style="width: 100px;height: 100px;"></div>


    <script>

        //赋值：div.style.....
        var div = document.getElementsByTagName("div")[0];
        div.style.width = "1000px";

        //获取值：
//        console.log(div.offsetWidth);
//        console.log(div.style.width);
//        console.log(div.style.border);

        //获取行内式和内嵌式
//        console.log(typeof window.getComputedStyle(div,null));
//        console.log(window.getComputedStyle(div,null).border);
//        console.log(window.getComputedStyle(div,null)["background-color"]);

//        console.log(div.currentStyle.padding);
//        console.log(div.currentStyle["background-color"]);


        console.log(getStyle(div,"padding"));
        console.log(getStyle(div,"background-color"));


        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }



    </script>


</body>
</html>

修改后的多个版本的缓动框架

单个属性的缓动框架封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>运动到400</button>
    <button>宽度变为400</button>
    <div></div>


    <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            animate(div,"left",400);
        }

        btnArr[1].onclick = function () {
            animate(div,"width",400);
        }


        //参数变为3个
        function animate(ele,attr,target){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //四部
                var leader = parseInt(getStyle(ele,attr)) || 0;
                //1.获取步长
                var step = (target - leader)/10;
                //2.二次加工步长
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                //3.赋值
                ele.style[attr] = leader + "px";
                 //4.清除定时器
                if(Math.abs(target-leader)<=Math.abs(step)){
                    ele.style[attr] = target + "px";
                    clearInterval(ele.timer);
                }

            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>


</body>
</html>

多个属性的缓动框架的封装（例子为：大小和距离）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>运动到400</button>
    <div></div>


    <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json = {"left":10,"top":200,"width":300,"height":200};
            animate(div,json);
        }



        //参数变为3个
        function animate(ele,json){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    console.log(1);
                    //4.清除定时器
//                    if(Math.abs(json[k]-leader)<=Math.abs(step)){
//                        ele.style[k] = json[k] + "px";
//                        clearInterval(ele.timer);
//                    }
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>


</body>
</html>

缓动动画（清除定时器版）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            top: 40px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>运动到400</button>
    <div></div>


    <script>

        var btnArr = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div")[0];

        btnArr[0].onclick = function () {
            var json = {"left":10,"top":200,"width":300,"height":200};
            animate(div,json);
        }



        //参数变为3个
        function animate(ele,json){
            //先清定时器
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                //开闭原则
                var bool = true;


                //遍历属性和值，分别单独处理json
                //attr == k(键)    target == json[k](值)
                for(var k in json){
                    //四部
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    //1.获取步长
                    var step = (json[k] - leader)/10;
                    //2.二次加工步长
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    //3.赋值
                    ele.style[k] = leader + "px";
                    //4.清除定时器
                    //判断: 目标值和当前值的差大于步长，就不能跳出循环
                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                    if(json[k] !== leader){
                        bool = false;
                    }
                }

                console.log(1);
                //只有所有的属性都到了指定位置，bool值才不会变成false；
                if(bool){
                    clearInterval(ele.timer);
                }
            },25);
        }




        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }


    </script>


</body>
</html>

实现回调函数

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style>
       div {
           position: absolute;
           top: 40px;
           left: 10px;
           width: 100px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>

   <button>运动到400然后回来</button>
   <div></div>


   <script>

       var btnArr = document.getElementsByTagName("button");
       var div = document.getElementsByTagName("div")[0];

       btnArr[0].onclick = function () {
           var json1 = {"left":300,"top":200,"width":300,"height":200};
           var json2 = {"left":10,"top":30,"width":100,"height":100};
           animate(div,json1, function () {
               animate(div,json2, function () {
                   animate(div,json1);
               });
           });

       }



       //参数变为3个
       function animate(ele,json,fn){
           //先清定时器
           clearInterval(ele.timer);
           ele.timer = setInterval(function () {
               //开闭原则
               var bool = true;


               //遍历属性和值，分别单独处理json
               //attr == k(键)    target == json[k](值)
               for(var k in json){
                   //四部
                   var leader = parseInt(getStyle(ele,k)) || 0;
                   //1.获取步长
                   var step = (json[k] - leader)/10;
                   //2.二次加工步长
                   step = step>0?Math.ceil(step):Math.floor(step);
                   leader = leader + step;
                   //3.赋值
                   ele.style[k] = leader + "px";
                   //4.清除定时器
                   //判断: 目标值和当前值的差大于步长，就不能跳出循环
                   //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
                   if(json[k] !== leader){
                       bool = false;
                   }
               }

               console.log(1);
               //只有所有的属性都到了指定位置，bool值才不会变成false；
               if(bool){
                   clearInterval(ele.timer);
                   //所有程序执行完毕了，现在可以执行回调函数了
                   //只有传递了回调函数，才能执行
                   if(fn){
                       fn();
                   }
               }
           },25);
       }




       //兼容方法获取元素样式
       function getStyle(ele,attr){
           if(window.getComputedStyle){
               return window.getComputedStyle(ele,null)[attr];
           }
           return ele.currentStyle[attr];
       }

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

手风琴案例(图片资源请自行配置)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{list-style: none}
        *{margin:0; padding:0;}
        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 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 = div.getElementsByTagName("li");
            //1.给li添加背景
            for(var i=0;i<liArr.length;i++){
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";

                //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
                liArr[i].onmouseover = function () {
                    //排他思想
                    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>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

效果如下：

手风琴.gif

360开机动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 322px;
            position: fixed;
            bottom:0;
            right:0;
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width:30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
    <script src="../jquery1.0.0.1.js"></script>
    <script>
        window.onload = function () {
            //需求：下面的盒子高度变为0，然后大盒子的宽在变为0.
            var guanbi = document.getElementById("guanbi");
            var box = guanbi.parentNode;
            var b = document.getElementById("b");

            guanbi.onclick = function () {
                //下面的盒子高度变为0，然后大盒子的宽在变为0.
                animate(b,{"height":0}, function () {
                    animate(box,{"width":0});
                });
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <span id="guanbi"></span>
        <div class="hd" id="t">
            <img src="images/t.jpg" alt=""/>
        </div>
        <div class="bd" id="b">
            <img src="images/b.jpg" alt=""/>
        </div>
    </div>
</body>
</html>

效果如下：

360开机.gif
素材：

t.jpg

b.jpg

走马灯效果

Html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css"/>
    <script src="js/jquery1.0.0.1.js"></script>
    <script src="js/js.js"></script>
</head>
<body>

    <div class="wrap" id="wrap">
       <div class="slide" id="slide">
           <ul>
               <!--五张图片-->
               <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
               <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
           </ul>
           <!--左右切换按钮-->
           <div class="arrow" id="arrow">
               <a href="javascript:;" class="prev"></a>
               <a href="javascript:;" class="next"></a>
           </div>
       </div>
    </div>


</body>
</html>

css.css

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.wrap{
    width:1200px;
    margin:10px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

index.js

/**
 * Created by Lenovo on 2016/9/13.
 */
window.onload = function () {
    //需求：点击足有按钮实现旋转木马。
        //原理：点击右侧按钮，让3号盒子的样式赋值给2号盒子，然后2->1,1->5,5->4,4->3。。。
        //左侧同理。
    //步骤：
    //1.鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
    //2.让页面加载出所有的盒子的样式。
    //3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
    //4.书写函数。
        // (操作数组。正向旋转：删除数组中第一个样式，添加到数组中的最后一位)
        // (操作数组。反向旋转：删除数组中最后一个样式，添加到数组中的第一位)


    var json = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            z:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:80,
            z:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:80,
            z:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            z:2
        }
    ];

    //0.获取元素
    var slide = document.getElementById("slide");
    var liArr = slide.getElementsByTagName("li");
    var arrow = slide.children[1];
    var arrowChildren = arrow.children;
    //设置一个开闭原则变量，点击以后修改这个值。
    var flag = true;



    //1.鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
    slide.onmouseenter = function () {
        //arrow.style.opacity = 1;
        animate(arrow,{"opacity":100});
    }
    slide.onmouseleave = function () {
        //arrow.style.opacity = 1;
        animate(arrow,{"opacity":0});
    }

    //2.让页面加载出所有的盒子的样式。
    //for(var i=0;i<liArr.length;i++){
    //    //利用animate()框架让指定的属性，缓慢运动到指定位置。
    //    animate(liArr[i],{
    //        "width":json[i].width,  //第一个li，必须对应第一个数组元素中的第一个的指定属性
    //        "top":json[i].top,
    //        "left":json[i].left,
    //        "opacity":json[i].opacity,
    //        "zIndex":json[i].z
    //    });
    //    //liArr[i].style.width = json[i].width+"px";
    //    //liArr[i].style.top = json[i].top+"px";
    //    //liArr[i].style.left = json[i].left+"px";
    //    //liArr[i].style.opacity = json[i].opacity/100;
    //    //liArr[i].style.zIndex = json[i].z;
    //}


    move();
    //3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
    //arrowChildren[0].
    //arrowChildren[1].
    //利用for...in...绑定事件。绑定后利用元素的className属性知道是前一个还是后一个，然后调用函数。
    for(var k in arrowChildren){
        arrowChildren[k].onclick = function () {
            if(this.className === "prev"){
                if(flag === true){
                    flag = false;
                    move(true);
                    //点击一次立刻修改为false，这样儿别人就不能在点击。（点击也不执行move()）
                }
            }else{
                if(flag){
                    flag = false;
                    move(false);
                }
            }
        }
    }

    //4.书写函数。
    // (操作数组。正向旋转：删除数组中第一个样式，添加到数组中的最后一位)
    // (操作数组。反向旋转：删除数组中最后一个样式，添加到数组中的第一位)
    function move(bool){
        //判断：如果等于undefined,那么就不执行这两个if语句
        //if(bool === true || bool === false){
        if(bool !== undefined){
            if(bool){
                // (操作数组。反向旋转：删除数组中最后一个元素，添加到数组中的第一位)
                //json.push();//在最后添加
                //json.pop();//删除最后一位
                //json.unshift();//在最前面添加
                //json.shift();//删除第一位

                //var ele = json.pop();
                //json.unshift(ele);
                json.unshift(json.pop());
            }else{
                // (操作数组。正向旋转：删除数组中第一个元素，添加到数组中的最后一位)
                //var ele = json.shift();
                //json.push(ele);
                json.push(json.shift());
            }
        }
        //在次为页面上的所有li赋值属性，利用缓动框架
        for(var i=0;i<liArr.length;i++){
            //利用animate()框架让指定的属性，缓慢运动到指定位置。
            animate(liArr[i],{
                "width":json[i].width,  //第一个li，必须对应第一个数组元素中的第一个的指定属性
                "top":json[i].top,
                "left":json[i].left,
                "opacity":json[i].opacity,
                "zIndex":json[i].z
            }, function () {
                //回调函数，所有程序执行完毕，在初始化flag的值为true
                flag = true;
            });
        }
    }

}

jquery1.0.0.1.js

/**
 * Created by Lenovo on 2016/9/11.
 */
function show(ele){
    ele.style.display = "block";
}

/**
 * 获取元素样式兼容写法
 * @param ele
 * @param attr
 * @returns {*}
 */
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

//参数变为3个
//参数变为3个
function animate(ele,json,fn){
    //先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //开闭原则
        var bool = true;


        //遍历属性和值，分别单独处理json
        //attr == k(键)    target == json[k](值)
        for(var k in json){
            //四部
            var leader;
            //判断如果属性为opacity的时候特殊获取值
            if(k === "opacity"){
                leader = getStyle(ele,k)*100 || 1;
            }else{
                leader = parseInt(getStyle(ele,k)) || 0;
            }

            //1.获取步长
            var step = (json[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            //特殊情况特殊赋值
            if(k === "opacity"){
                ele.style[k] = leader/100;
                //兼容IE678
                ele.style.filter = "alpha(opacity="+leader+")";
                //如果是层级，一次行赋值成功，不需要缓动赋值
                //为什么？需求！
            }else if(k === "zIndex"){
                ele.style.zIndex = json[k];
            }else{
                ele.style[k] = leader + "px";
            }
            //4.清除定时器
            //判断: 目标值和当前值的差大于步长，就不能跳出循环
            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
            if(json[k] !== leader){
                bool = false;
            }
        }

        console.log(1);
        //只有所有的属性都到了指定位置，bool值才不会变成false；
        if(bool){
            clearInterval(ele.timer);
            //所有程序执行完毕了，现在可以执行回调函数了
            //只有传递了回调函数，才能执行
            if(fn){
                fn();
            }
        }
    },25);
}



//获取屏幕可视区域的宽高
function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

js.js

/**
 * Created by Lenovo on 2016/9/13.
 */
window.onload = function () {
    var arr = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            zIndex:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:80,
            zIndex:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            zIndex:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:80,
            zIndex:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            zIndex:2
        }
    ];

    //0.获取元素
    var slide = document.getElementById("slide");
    var liArr = slide.getElementsByTagName("li");
    var arrow = slide.children[1];
    var arrowChildren = arrow.children;
    //设置一个开闭原则变量，点击以后修改这个值。
    var flag = true;

    //1.鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
    slide.onmouseenter = function () {
        //arrow.style.opacity = 1;
        animate(arrow,{"opacity":100});
    }
    slide.onmouseleave = function () {
        //arrow.style.opacity = 1;
        animate(arrow,{"opacity":0});
    }

    move();
    //3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
    arrowChildren[0].onclick = function () {
        if(flag){
            flag = false;
            move(true);
        }
    }
    arrowChildren[1].onclick = function () {
        if(flag){
            flag = false;
            move(false);
        }
    }

    //4.书写函数。
    function move(bool){
        //判断：如果等于undefined,那么就不执行这两个if语句
        if(bool === true || bool === false){
            if(bool){
                arr.unshift(arr.pop());
            }else{
                arr.push(arr.shift());
            }
        }
        //在次为页面上的所有li赋值属性，利用缓动框架
        for(var i=0;i<liArr.length;i++){
            animate(liArr[i],arr[i], function () {
                flag = true;
            });
        }
    }

}

其中图片素材自己配置
效果展示：

走马灯.gif

欢迎关注我的个人微信公众号，免费送计算机各种最新视频资源！你想象不到的精彩！

0.jpg

Web前端------缓动框架的封装、行内样式与内嵌样式等的获取

之前版本的缓动框架

获取行内样式、内嵌样式、外链样式的方法介绍

只能获取行内式：（既能获取又能赋值）

获取任意类型的CSS样式的属性值：（只能获取）

修改后的多个版本的缓动框架

手风琴案例(图片资源请自行配置)

360开机动画

走马灯效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程