封装带有缓冲的运动函数

最新推荐文章于 2022-12-27 11:25:37 发布

LuckyGirl_L

最新推荐文章于 2022-12-27 11:25:37 发布

阅读量323

点赞数

文章标签：带有缓冲的运动函数

本文链接：https://blog.csdn.net/LuckyGirl_L/article/details/103394927

版权

1.之前的学习封装的是一个匀速的运动函数，是这个样子的

/* 
* 运动函数
* @param {object}:elem 标签
* @param {string}:attr 属性名
* @param {number}:step 步长（每次的运动距离）
* @param {number}:target 目标值
 */

function move(elem,attr,step,target){
    step =  parseInt(getStyle(elem,attr))< target ? step :-step;
    clearInterval(elem.timer);//自定义属性
    elem.timer = setInterval(function(){ 
        //获取当前值 + 10
        var cur = parseInt(getStyle(elem,attr)) + step;
        if(cur >= target && step > 0  ||  cur <= target && step < 0){ //下
            cur = target;
            //停止定时器
            clearInterval(elem.timer);
        }
        
        elem.style[attr] = cur + "px";

    },30);
}

这个函数是用来解决轮播图的问题，使图片能够自动的无限循环，速度是匀速的，无论是从第一张到第二张，还是第一张到最后一张，切换的速度都是一样的，这与我们实际看到淘宝等网页的轮播图是不一样的，他们是远快近慢，所以相对来说，把匀速的运动函数运用到轮播图上还是有点小瑕疵，因此今天我学习了封装带有缓冲的运动函数。

/* 
* 有缓冲的运动
* @param {object}:elem 标签
* @param {object}:attrs 运动参数
* @param {function}:fun 回调函数
*/
function bufferMove(elem,attrs,fun){//运动元素elem，属性attr，目标值target 
          
    //开启定时器之前，先清除掉之前的，保证运动方向
    clearInterval(elem.timer);//width
    elem.timer = setInterval(function(){
       var flag = true; //假设全部到达目标点
       for(var attr in attrs){
                //1.获取当前值
            if(attr == "opacity"){
                var cur = parseInt(getStyle(elem,attr)*100); //放大了100倍
            }else{
                var cur = parseInt(getStyle(elem,attr)); //放大了100倍
            }
            
            //2.计算速度
            var speed = (attrs[attr]-cur)/10;

            //3.处理小数
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //4.停止定时器
            if(cur != attrs[attr]){  //只要有一个属性没到目标点，说明假设不成立，flag=false
                flag = false;
            }

            //在当前值的基础上 + 速度
            if(attr == "opacity"){
                elem.style[attr]= (cur + speed)/100; //没有px
            }else{
                elem.style[attr]= cur + speed +"px";
            }
       }
       
       //所有的属性都到达了目标点，才能停止定时器
       if(flag){
           clearInterval(elem.timer);
           if(fun){ //有值，说明传了回调函数
              fun();
           }
       }  

   },30)

}

拿我之前写的一个轮播图对比一下效果

//这个是之前写的匀速运动的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .box{
            position:relative;
            width:960px;
            height:320px;
            border:1px solid red;
            margin:20px auto;
            overflow: hidden;
        }
        .box #lunbo::after{
            content:"";
            display:block;
            clear:both;
        }
        .box #lunbo{
            position:absolute;
            left:0;
            width:4800px;
            height:320px;
        }
        .box #lunbo li{float:left;}
        .box .circle{
            position:absolute;
            bottom:10px;
            width:100%;
            text-align: center;
        }
        .box .circle span{
            display:inline-block;
            width:14px;
            height:14px;
            border-radius:50%;
            background-color:white;
            margin-right:5px;
            }
        .box .circle .active{background-color:orange;}
        #leftButton,#rightButton{
            position:absolute;
            top:120px;
            width:60px;
            height:80px;
            background-image: url(img/btn_show.png);
            background-repeat: no-repeat;
        }
        #leftButton{
            left:0;
            background-position:0 -80px;
        }
        #rightButton{
            right:0;
            background-position:0 0;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <ul id="lunbo">
            <li><img src="img/one.jpg" alt="#"></li>
            <li><img src="img/two.jpg" alt="#"></li>
            <li><img src="img/three.jpg" alt="#"></li>
            <li><img src="img/four.jpg" alt="#"></li>
            <li><img src="img/one.jpg" alt="#"></li>
        </ul>
        <div class="circle">
            <span class="active"></span><span></span><span></span><span></span>
        </div>
        <div id="leftButton"></div>
        <div id="rightButton"></div>
    </div>
    <script src="js/function.js"></script>
    <script>
        var oBox = document.getElementById("box");
        var lunboUl = document.getElementById("lunbo");
        var oSpan = document.getElementsByTagName("span");
        var leftBtn = document.getElementById("leftButton");
        var rightBtn = document.getElementById("rightButton");
        var n = 0;
        //轮播图滑动
        var change = function () {
            n++;
            if (n == 5) {
                n = 1;
                lunboUl.style.left = 0;
            }
            move(lunboUl, "left", 50, -960 * n);
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n == 4 ? 0 : n].className = "active";

        }
        //定时器调用
        var timer = setInterval(change, 3000);
        //鼠标移入清除定时器
        oBox.onmouseover = function () {
            clearInterval(timer);
        }
        //鼠标移出恢复定时器
        oBox.onmouseout = function () {
            timer = setInterval(change, 3000);
        }
        //点击右按钮，图片下一张
        rightBtn.onclick = function () {
            n++;
            if (n == 4) { n = 0; }
            fun(n);
        }
        //点击左按钮，图片上一张
        leftBtn.onclick = function () {
            n--;
            if (n < 0) { n = 3; }
            fun(n);
        }
        //封装点击的函数
        var fun = function (n) {
            lunboUl.style.left = -960 * n + "px";
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n].className = "active";
        }
        //通过小圆圈控制图片
        for(var i=0;i<oSpan.length;i++){
           oSpan[i].index=i;
            oSpan[i].onclick = function(){
                fun(this.index);
            }         
        }


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .box{
            position:relative;
            width:960px;
            height:320px;
            border:1px solid red;
            margin:20px auto;
            overflow: hidden;
        }
        .box #lunbo::after{
            content:"";
            display:block;
            clear:both;
        }
        .box #lunbo{
            position:absolute;
            left:0;
            width:4800px;
            height:320px;
        }
        .box #lunbo li{float:left;}
        .box .circle{
            position:absolute;
            bottom:10px;
            width:100%;
            text-align: center;
        }
        .box .circle span{
            display:inline-block;
            width:14px;
            height:14px;
            border-radius:50%;
            background-color:white;
            margin-right:5px;
            }
        .box .circle .active{background-color:orange;}
        #leftButton,#rightButton{
            position:absolute;
            top:120px;
            width:60px;
            height:80px;
            background-image: url(img/btn_show.png);
            background-repeat: no-repeat;
        }
        #leftButton{
            left:0;
            background-position:0 -80px;
        }
        #rightButton{
            right:0;
            background-position:0 0;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <ul id="lunbo">
            <li><img src="img/one.jpg" alt="#"></li>
            <li><img src="img/two.jpg" alt="#"></li>
            <li><img src="img/three.jpg" alt="#"></li>
            <li><img src="img/four.jpg" alt="#"></li>
            <li><img src="img/one.jpg" alt="#"></li>
        </ul>
        <div class="circle">
            <span class="active"></span><span></span><span></span><span></span>
        </div>
        <div id="leftButton"></div>
        <div id="rightButton"></div>
    </div>
    <script src="js/function.js"></script>
    <script>
        var oBox = document.getElementById("box");
        var lunboUl = document.getElementById("lunbo");
        var oSpan = document.getElementsByTagName("span");
        var leftBtn = document.getElementById("leftButton");
        var rightBtn = document.getElementById("rightButton");
        var n = 0;
        //轮播图滑动
        var change = function () {
            n++;
            if (n == 5) {
                n = 1;
                lunboUl.style.left = 0;
            }
            // move(lunboUl, "left", 50, -960 * n);
            bufferMove(lunboUl,{"left":-960 * n});
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n == 4 ? 0 : n].className = "active";

        }
        //定时器调用
        var timer = setInterval(change, 3000);
        //鼠标移入清除定时器
        oBox.onmouseover = function () {
            clearInterval(timer);
        }
        //鼠标移出恢复定时器'
        oBox.onmouseout = function () {
            timer = setInterval(change, 3000);
        }
        //点击右按钮，图片下一张
        rightBtn.onclick = function () {
            change();
        }
        //点击左按钮，图片上一张
        leftBtn.onclick = function () {
            n--;
            if (n <0) {
                n = 3;
                lunboUl.style.left = -3840+"px";
            }
            // move(lunboUl, "left", 50, -960 * n);
            bufferMove(lunboUl,{"left":-960 * n});
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n == 4 ? 0 : n].className = "active";
        }
        //通过小圆圈控制图片
        for(var i=0;i<oSpan.length;i++){
           oSpan[i].index=i;
            oSpan[i].onclick = function(){
                n=this.index;
                // move(lunboUl, "left", 50, -960 * n);
                bufferMove(lunboUl,{"left":-960 * n});
            for (var i = 0; i < oSpan.length; i++) {
                oSpan[i].className = "";
            }
            oSpan[n == 4 ? 0 : n].className = "active";
               
            }         
        }


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