JS運動框架之分享側邊欄動畫實例

2019-11-20 13:02:31

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS運動框架之分享側邊欄動畫實現方法。分享給大家供大家參考。具體實現方法如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <style type="text/css">  
        *{  
            margin:0px;  
            padding:0px;  
        }  
            #div1{  
                width:319px;  
                height: 340px;  
                border: 1px solid #FFF;  
                position: absolute;  
                top:100px;  
                left:-320px;  
                background-image: url(images/1.png);  
                background-repeat:no-repeat ;  
            }  
            #div1 span{  
                width:30px;  
                height: 130px;  
                border: 1px solid blue;  
                position: absolute;  
                right:-23px;  
                top:95px;  
                background: red;  
                font-family: "微軟雅黑";  
                color: #FFFFFF;  
                text-align: center;  
                line-height: 40px;  
                border-radius: 0px 200px 200px 0px;  
            }  
        </style>  
        <script type="text/javascript">  
            window.onload=function(){  
                var oDiv=document.getElementById("div1");  
                var oSpan=oDiv.getElementsByTagName('span')[0];  
                var time=null;  
                var speed=8;  
                oDiv.onmouseover=function(){//這里給整個div加鼠標移入的事件  
                    clearInterval(time);  
                    time=setInterval(function(){  
                        if(oDiv.offsetLeft>=0){clearInterval(time);}  
                        else{  
                            oDiv.style.left=oDiv.offsetLeft+speed+'px';  
                        }  
                    },1);  
                }  
                oDiv.onmouseout=function(){//這里給整個div加鼠標移出事件
                    clearInterval(time);  
                    time=setInterval(function(){  
                        if(oDiv.offsetLeft<=-320){clearInterval(time);}  
                        else{  
                            oDiv.style.left=oDiv.offsetLeft-speed+'px';  
                        }  
                    },1);  
                }  
            }  
        </script>  
    </head>  
    <body>  
        <div id="div1">  
            <span>分享到</span>  
        </div>  
    </body>  
</html>

優化后的代碼:

復制代碼代碼如下:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title></title>  
        <style type="text/css">  
        *{  
            margin:0px;  
            padding:0px;  
        }  
            #div1{  
                width:319px;  
                height: 340px;  
                border: 1px solid #FFF;  
                position: absolute;  
                top:100px;  
                left:-320px;  
                background-image: url(images/1.png);  
                background-repeat:no-repeat ;  
            }  
            #div1 span{  
                width:30px;  
                height: 130px;  
                border: 1px solid blue;  
                position: absolute;  
                right:-23px;  
                top:95px;  
                background: red;  
                font-family: "微軟雅黑";  
                color: #FFFFFF;  
                text-align: center;  
                line-height: 40px;  
                border-radius: 0px 200px 200px 0px;  
            }  
        </style>  
        <script type="text/javascript">  
            window.onload=function(){  
                var oDiv=document.getElementById("div1");  
                var oSpan=oDiv.getElementsByTagName('span')[0];  
                var time=null;  
                var spe=8;  
                var speed=null;  
                function move(bord){  
                    clearInterval(time);  
                    time=setInterval(function(){  
                        if(oDiv.offsetLeft>bord){speed=-spe;}  
                        else{speed=spe;}  
                        if(oDiv.offsetLeft==bord){clearInterval(time);}  
                        else{  
                            oDiv.style.left=oDiv.offsetLeft+speed+'px';  
                          }  
                    },1);  
                }  
                oDiv.onmouseover=function(){//這里給整個div加鼠標移入的事件
                    move(0);  
                }  
                oDiv.onmouseout=function(){//這里給整個div加鼠標移出事件
                    move(-320);  
                }  
            }  
        </script>  
    </head>  
    <body>  
        <div id="div1">  
            <span>分享到</span>  
        </div>  
    </body>  
</html>