美文网首页
通用运动函数

通用运动函数

作者: Jadon7 | 来源:发表于2018-10-16 13:10 被阅读0次
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script>

    //获取非行内元素的样式
    function getStyle(obj,name){
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj,false)[name];
        }
        
    }

    //通用函数
    function startMover(acr,sx,iTaget){
        clearInterval(acr.timer);
        acr.timer=setInterval(function(){
            var oDivSx=0;
            if (sx=='opacity') {
                oDivSx=parseFloat(getStyle(acr,sx))*100;
            } else {
                oDivSx=parseInt(getStyle(acr,sx));
            }
            var spead=0;
            spead=(iTaget-oDivSx/100)/3;
            spead=spead>0?Math.ceil(spead):Math.floor(spead);
            if (oDivSx==iTaget) {
                clearInterval(acr.timer);
            }else{
                if(sx=='opacity'){
                    acr.style.filter='alpha(opcity:'+(oDivSx+spead)+')';
                    acr.style.opacity=(oDivSx+spead)/100;
                }else{
                    acr.style[sx]=oDivSx+spead+'px';
                }
            }
        },17)
    }
    
    //调取
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        oDiv.onmousemove=function(){
            startMover(this,'opacity',0.3)
        }
    }
    
</script>
<style>
    #div1{
        width: 200px;
        height: 200px;
        background: green;
        opacity: 1;
        filter: alpha(opacity:1);
    }
</style>
<body>
    <div id="div1"></div>
</body>
</html>

相关文章

网友评论

      本文标题:通用运动函数

      本文链接:https://www.haomeiwen.com/subject/cofhzftx.html