码迷,mamicode.com
首页 > Web开发 > 详细

js运动

时间:2020-05-22 21:06:10      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:样式   ade   attrs   条件   typeof   header   ==   get   star   

缓冲运动

   function startMove(ele, attrs, callBack) {
            var curr = 0,
                speed = null;
            ele.timer = setInterval(function () {
                var stop = true; //如果有某一个不满足条件,则为false。
                for (var attr in attrs) {

                    if (attr === ‘opacity‘)
                        curr = parseFloat(getStyle(ele, ‘opacity‘)) * 100; //如果为背景色,将值扩大100倍,在赋值的时候将值转换回去
                    else
                        curr = parseInt(getStyle(ele, attr));

                    speed = (attrs[attr] - curr) / 7 //由快到慢
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (attr === ‘opacity‘)
                        ele.style.opacity = (curr + speed) / 100;
                    else
                        ele.style[attr] = curr + speed + ‘px‘;

                    if (curr !== attrs[attr])
                        stop = false;
                }

                if (stop) {
                    clearInterval(ele.timer);
                    typeof callBack == ‘function‘ && callBack();
                }
            }, 30)
        }

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

弹性运动

js运动

标签:样式   ade   attrs   条件   typeof   header   ==   get   star   

原文地址:https://www.cnblogs.com/pengyinghao/p/12939564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!