DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS運動框架之分享側邊欄動畫實例
JS運動框架之分享側邊欄動畫實例
編輯:關於JavaScript     

本文實例講述了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>

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved