美文网首页
通用运动函数

通用运动函数

作者: 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