JS运动框架之分享侧边栏动画实例

(编辑：jimmy 日期: 2026/5/5 浏览：3 次 )

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

上一篇：jQuery DOM插入节点操作指南
下一篇：jQuery DOM删除节点操作指南