快捷導(dǎo)航

JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà)實(shí)例

更新時(shí)間：2015年03月03日 11:03:33 作者：mikyou

這篇文章主要介紹了JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà),實(shí)例分析了javascript操作div及css的技巧,需要的朋友可以參考下

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

<!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(){//這里給整個(gè)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(){//這里給整個(gè)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(){//這里給整個(gè)div加鼠標(biāo)移入的事件

                    move(0);  

                }  

                oDiv.onmouseout=function(){//這里給整個(gè)div加鼠標(biāo)移出事件

                    move(-320);  

                }  

            }  

        </script>  

    </head>  

    <body>  

        <div id="div1">  

            <span>分享到</span>  

        </div>  

    </body>  

</html>