JS運動小程序

JS簡單運動框架
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
                left: 0;
                top: 50px;
            }
        </style>
        <script>
            var timer = null;
            function startAction(){
                var oDiv = document.getElementById('div1');
                var speed = 7;
                //開啟一個定時器一定要將之前的定時器移除
                    clearInterval(timer);
                     timer= setInterval(function(){
                        //定時器到達(dá)終點和未到達(dá)終點一定要分開寫條件
                        if(oDiv.offsetLeft>=300)
                        {   
                            clearInterval(timer);
                        }else
                        {
                            oDiv.style.left = oDiv.offsetLeft + speed +'px';
                        }
                    },30)
                }
        </script>
    </head>
    <body>
        <input type="button" value="開始運動" onclick="startAction()" />
        <div id="div1"></div>
    </body>
</html>
分享到側(cè)邊欄
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 150px;
                height: 200px;
                background: green;
                position: absolute;
                left: -150px;
            }
            #div1 span{
                position: absolute;
                width: 20px;
                height: 60px;
                line-height: 20px;
                background: blue;
                right: -20px;
                top: 70px;
            }
        </style>
        <script>
            window.onload  = function(){
                var oDiv = document.getElementById('div1');
                //調(diào)用函數(shù)
                 oDiv.onmouseover = function(){
                    startMove(0);
                 };
                 oDiv.onmouseout = function(){
                    startMove(-150)
                 }
            };
            var timer = null;
            function startMove(iTarget){
                var oDiv = document.getElementById('div1');
                //設(shè)置速度
                var speed = 5;
                //判斷速度方向
                if(oDiv.offsetLeft>iTarget)
                {
                    speed = -10;
                }else
                {
                    speed = 10;
                }
                //運動框架
                clearInterval(timer);
                timer = setInterval(function(){
                    if(oDiv.offsetLeft==iTarget)
                    {
                        clearInterval(timer);
                    }else
                    {
                        oDiv.style.left =oDiv.offsetLeft +speed +'px';
                    }
                },30)
            }
        </script>
    </head>
    <body>
    </body>
    <div id="div1">
        <span>
            分享到
        </span>
    </div>
    
</html>
淡入淡出
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 200px;
                height: 200px;
                background: red;
                /*設(shè)置透明度*/
                filter: alpha(opacity:30);/*給IE*/
                opacity: 0.3;/*給火狐和chome*/
            }
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                oDiv.onmouseover = function(){
                    starMove(100);
                }
                oDiv.onmouseout = function(){
                    starMove(30);
                }
            }
            var alpha = 30;
            var timer = null;
            function starMove(iTarget){
                var oDiv = document.getElementById('div1');
                var speed = 0;
                clearInterval(timer);
                timer = setInterval(function(){
                    if(alpha<iTarget)
                    {
                        speed = 10;
                    }else
                    {
                        speed = -10;
                    }
                    
                    if(alpha == iTarget)
                    {
                        clearInterval(timer);
                    }else
                    {
                        alpha +=speed;
                        oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                        oDiv.style.opacity = alpha/100;
                    }
                },30)
            }
        </script>
        
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容