js笔记---（运动）通用的move方法，兼容透明度变化

浏览数：55 / 时间：2015年06月09日

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        /*#div1{ height:100px; width:100px; position:absolute; --left:800px; margin-top:90px; background-color:red;}
        span { height:300px; width:1px; position:absolute; left:500px; background-color:black; }*/
        div { height:100px; width:100px; margin-top:50px; background-color:red; }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //var oBtn = document.getElementById(‘btn1‘);
            //oBtn.onclick = function () {
            //    starMove(400);
            //}
            var oDiv = document.getElementsByTagName(‘div‘);
            //var i = 0;
            //for (i = 0; i < oDiv.length; i++) {
                
            //}
            oDiv[0].onmouseover = function () {
                starMove(this, ‘width‘, 300);
            }
            oDiv[0].onmouseout = function () {
                starMove(this, ‘width‘, 100);
            }
            oDiv[1].onmouseover = function () {
                starMove(this, ‘height‘, 300);
            }
            oDiv[1].onmouseout = function () {
                starMove(this, ‘height‘, 100);
            }
            oDiv[2].onmouseover = function () {
                starMove(this, ‘opacity‘, 30);
            }
            oDiv[2].onmouseout = function () {
                starMove(this, ‘opacity‘, 100);
            }
        }
        window.onscroll = function () {
            var scroTop = document.documentElement.scrollHeight || document.body.scrollTop;
        }
        //获取样式数值
        function getStyle(obj, attr)
        {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            }
            else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        
        var iSpeed=0;
        function starMove(obj,attr,iTarget)
        {
            clearInterval(obj.timer);
            var iCur = 0;
            obj.timer = setInterval(function () {
                //parseInt(parseFloat(getStyle(obj, attr)) * 100)中 parseFloat(getStyle(obj, attr)为取带小数的opacity值
                //parseInt(...) 目的为 解决计算机小数问题bug 防止3.0000000000001=3 类似问题
                iCur = attr == "opacity" ? parseInt(parseFloat(getStyle(obj, attr)) * 100) : parseInt(getStyle(obj, attr));
                //iCur = parseInt(getStyle(obj, attr));
                iSpeed =(iTarget - iCur) / 8;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (iCur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    if (attr == "opacity") {
                        obj.style.filter = ‘alpha(opacity=‘ + (iCur + iSpeed) + ‘)‘;
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        obj.style[attr] = iCur + iSpeed + ‘px‘;
                    }
                    
                }
            }, 30);
        }
    </script>
</head>
<body>
    <!--<input type="button" id="btn1" value="开始" /><br />
    <div id="div1"></div>
    <span></span>-->
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。