相思资源网 Design By www.200059.com

本文实例讲述了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程序设计有所帮助。

标签:
JS,运动框架,分享侧边栏,动画

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“JS运动框架之分享侧边栏动画实例”

暂无JS运动框架之分享侧边栏动画实例的评论...