003-js缓动动画的一个小bug

来源：互联网发布：金蝶软件补丁编辑：程序博客网时间：2024/04/29 22:44

这里写图片描述
第一：
缓动动画的一个小问题：其中有一个值达到目标值后，其他几个值并没有达到目标值就停止了的问题：手动点击按钮才能移动到目标值。
原因是因为：在判断的时候，判断的是对象中的任意一个值top或者left或者width达到目标值就会清除定时器。

解决：判断对象中所有对象属性的目标值都到达才清除定时器。加flag标记。
//如果leader值不等于目标值的时候，flag=false。 if(leader!=target){ flag=false。 }
//如果flag为true时就清除定时器。
if(flag){ clearInterval(obj.timer); } //top 400 left 400 width 400 //top 389 left 389 width 400

<script>    var btn = document.getElementById("btn");    var demo = document.getElementById("demo");    var timer = null;    /*DOM标准里边有一个getComputedStyle()全局方法，    通过元素或者属性来获取当前属性的值（样式的信息。）返回的是字符串类型。但是ie浏览器不支持这个方法。*/    function getStyle(obj, attr) {        if (window.getComputedStyle) {//如果当前浏览器有这个方法，就返回这个方法，            return window.getComputedStyle(obj, null)[attr];//可获取当前对象的属性值            // window.getComputedStyle(demo, null)[left]; 返回的值是left的值300.        } else {            return obj.currentStyle[attr];//ie浏览器的获取当前对象的样式的信息。        }    }    btn.onclick = function () {        animation(demo, { "top": 300, "left": 400, "width": 400 })    }    // 封装动画函数    //json:是一个键值对，键值对中有属性和值，    function animation(obj, json) {        clearInterval(obj.timer);        //先用for in循环，循环出json键值对中的所有属性值。        //k就是json当中的键，json[k]  就可以获取k这个键对应的值。        obj.timer = setInterval(function () {            for (var k in json) {                //开始位置                var leader = parseInt(getStyle(obj, k)) || 0;//取整||也有可能盒子的位置是从0开始获取的                var target = json[k];//获取的就是值300,400,400                //给一个步长：（用目标值-初始值）/10                var step = (target - leader) / 10;                //天花板地板函数步长取整                step = step > 0 ? Math.ceil(step) : Math.floor(step);                leader = leader + step;//初始值不断增加，数值，需要单独加px                //demo盒子移动，把leader赋值给盒子的样式                obj.style[k] = leader + "px";                // if (leader === target) {                //     // 清除定时器                //     clearInterval(obj.timer);                // }                if (leader != target) {                    flag = false;                }                //如果flag为true时就清除定时器。                if (flag) {                    clearInterval(obj.timer);                }            }        }, 1000)    }</script>

第二：

由于for循环之后，循环到最后一个a标签，所以造成点击图片事件后，始终只在最后一个a标签后+=追加
解决：第一种方式：用this代替当前标签

<body>    <ul id="con">        <li>            <a href="#"><img src="1.png" alt="哈哈"> </a>        </li>        <li>            <a href="#"><img src="1.png" alt="嘿嘿"> </a>        </li>    </ul></body><script>    var u = document.getElementById("con");    var imgs = u.getElementsByTagName("a");    var flag = false;    for (var i = 0; i < imgs.length; i++) {        var img = imgs[i];        console.log(imgs);        img.onclick = function () {            console.log(imgs);//由于for循环之后，循环到最后一个a标签，所以造成点击图片事件后，始终只在最后一个a标签后+=追加//解决：第一种方式：用this代替当前标签。            if (flag == false) {                this.innerHTML += "<img src='2.png' alt='嘿嘿'> ";                flag = true;            } else {                this.removeChild(this.lastChild);                flag = false;            }        }    }    console.log(imgs);</script>

或者用自执行函数。(function(img){})()→小括号后加小括号表示自调用，传入需要执行的参数即可。

(function(c){c.onclick = function () {            if (flag == false) {                c.innerHTML += "<img src='2.png' alt='嘿嘿'> ";                flag = true;            } else {                c.removeChild(c.lastChild);                flag = false;            }        }  })(img)

阅读全文

0 0