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

JS完美运动框架

时间:2020-05-15 15:20:22      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:art   turn   window   pac   bst   pre   charset   bsp   time   

多个值同事变化

setStyle同时设置多个属性

参数传递

json的使用

for  in遍历属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div{
            width: 200px;
            height: 200px;
            background: red;
            margin: 20px;
            filter: alpha(30);
            opacity: 0.3;
        }
    </style>
   
    <script>
        window.onload = function(){
            var oDiv = document.getElementById(div);
            oDiv.onmouseover = function () {
                startMove(oDiv, {width:202,height:300,opacity:100},function () {
                    console.log(123)//判断定时器有没有停止
                })
            }
        }
    </script>
</head>
<body>
    <div id="div"></div>
</body>
<script src="move2.js"></script>
</html>

move2.js

function getStyle(obj,name){
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj,false)[name]
    }
}
//var alpha = 30;所有的东西都不能公用
function startMove (obj,json,fnEnd) {
    clearInterval(obj.time);
    obj.time = setInterval(function(){
        var bStop=true;//假设所有的值都到了
        for(var attr in json){
            var cur = 0;
            if (attr == ‘opacity‘) {
                cur = Math.round(parseFloat(getStyle(obj,attr))*100);
            } else {
                cur = parseInt(getStyle(obj,attr));
            }
            var speed = (json[attr]-cur)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);

            if(cur !== json[attr]){//如果有一个值没到
                bStop=false;//设置为fslse
            }
            if (attr == ‘opacity‘) {
                obj.style.filter = ‘alpha(opacity:‘+(cur+speed)+‘)‘;
                obj.style.opacity = (cur+speed)/100;
            } 
            else {
                obj.style[attr] = cur+speed+‘px‘;
            }
        }
            if (bStop) {
                clearInterval(obj.time);
                if (fnEnd) fnEnd();
            }
       
    },30)
}

 

JS完美运动框架

标签:art   turn   window   pac   bst   pre   charset   bsp   time   

原文地址:https://www.cnblogs.com/520yh/p/12894953.html

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