欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS運動框架之分享側(cè)邊欄動畫實例

 更新時間：2015年03月03日 11:03:33   作者：mikyou  
這篇文章主要介紹了JS運動框架之分享側(cè)邊欄動畫,實例分析了javascript操作div及css的技巧,需要的朋友可以參考下

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

復(fù)制代碼 代碼如下:
<!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加鼠標(biāo)移入的事件 
                    clearInterval(time); 
                    time=setInterval(function(){ 
                        if(oDiv.offsetLeft>=0){clearInterval(time);} 
                        else{ 
                            oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
                        } 
                    },1); 
                } 
                oDiv.onmouseout=function(){//這里給整個div加鼠標(biāo)移出事件
                    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>

優(yōu)化后的代碼:
復(fù)制代碼 代碼如下:
<!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加鼠標(biāo)移入的事件
                    move(0); 
                } 
                oDiv.onmouseout=function(){//這里給整個div加鼠標(biāo)移出事件
                    move(-320); 
                } 
            } 
        </script> 
    </head> 
    <body> 
        <div id="div1"> 
            <span>分享到</span> 
        </div> 
    </body> 
</html>

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

相關(guān)文章

最新評論