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


Posted in Javascript onMarch 03, 2015

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

Javascript 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
jQuery DOM删除节点操作指南
Mar 03 #Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 #Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 #Javascript
javascript验证身份证号
Mar 03 #Javascript
JS烟花背景效果实现方法
Mar 03 #Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 #Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 #Javascript
You might like
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python列表切片用法示例
2017/04/19 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python os.fork() 循环输出方法
2019/08/08 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
环境工程专业个人求职信
2013/12/05 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
标准自荐信范文
2014/01/29 职场文书
高中生物教学反思
2014/02/05 职场文书
组织生活会发言材料
2014/12/15 职场文书
北京英文导游词
2015/02/12 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server