网站上会经常用到Javascript 中的运动，这次与大家分享一下一些运动的基本应用 。 方便大家在开发中能够直接使用。

代码简单易懂，适用于初学者。最后会一步一步整理出一套自己的运动框架。

应用案例效果图：

鼠标移动到分享上 ，左边的div就会显示出来。移开会自己恢复。相信这个大家都会用到 很实用，下面看看代码是如何实现的。

<style type="text/css">

            #div1 {

                width: 150px;

                height: 200px;

                background: green;

                position: absolute;

                left: -150px;

            }

            #div1 span {

                position: absolute;

                width: 20px;

                height: 60px;

                line-height: 20px;

                background: blue;

                right: -20px;

                top: 70px;

            }

        </style>
<body>

        <div id="div1">

            <span>

                分享到

            </span>

        </div>

    </body>

以下是Javascript 代码

<script type="text/javascript">

            window.onload=function(){

                var oDiv=document.getElementById("div1");

                oDiv.onmouseover=function(){

                    startMove(0);

                };

                oDiv.onmouseout=function(){

                    startMove(-150);

                };

            }

            var time=null;

            function startMove(iTraget){

                var oDiv=document.getElementById("div1");

                clearInterval(time);

                time=setInterval(function(){

                    var speed=0;

                    if(oDiv.offsetLeft>iTraget){

                        speed=-10;

                    }else{

                        speed=10;

                    }

                    if(oDiv.offsetLeft==iTraget){

                        clearInterval(time);

                    }else{

                        oDiv.style.left=oDiv.offsetLeft+speed+'px';

                    }

                },30);

            }

        </script>

思路：

样式中初始的left是-150 这样div就是缩在里面，给0 就会显示出来。 那么我们只要变动这个值就可以了

startMove 中的参数 iTarget 是目标点 ，表示到哪个目标点会停下来。

控制speed 的大小 就能控制运动的快慢。如果达到目标点 就停止定时器 。

规律：

*  假设

*         left:30           iTarget:300     得出    往右  为正
*         left:600         iTarget:50       得出    往左  为负

* 
* 通过当前位置left 与目标点的 关系 iTarget 推断出 速度的正负

注意： 一上来就要关了定时器，因为是每次移动到分享到，都会开个定时器，开的越多相对来说速度就越快，因为同时会有多个定时器执行。

所以每次要保证一个定时器工作。

遵循：函数功能一样，参数越少越好的原则 ，所以根据上面的规律把speed 并不是作为参数传入。

举个生活中的例子：你打车，告诉出租车司机已100码的速度到哪哪哪，一般是不可能的吧。打车你不可能告诉师傅你要跑多快

所以程序也是一样的，这里就把速度这个传参去掉了。

当然现在的这个运动框架还会有许多问题，在之后会陆续解决。

Javascript 匀速运动——应用案例：网站常用功能分享到的更多相关文章

  1. web网站常用功能测试点总结

    目录 一.输入框 二.搜索功能 三.添加.修改功能 四.删除功能 五.注册.登录模块 六.上传图片测试 七.查询结果列表 八.返回键检查 九.回车键检查 十.刷新键检查 十一.直接URL链接检查 十二 ...

  2. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  3. WebStorm 常用功能的使用技巧分享

    WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...

  4. 通过servlet实现几个网站常用的功能

    帮朋友写的小程序,由于功能比较简单所以就偷懒只使用了Servlet 一.JSP页面部分(这个部分的设置比较粗糙,主要是为了查看功能能否实现,如果需要向用户展示还得修饰一下) 1)功能页(所有需要后台实 ...

  5. JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...

  6. 分享几个社交类网站常用并且也是最好用的jquery类库

    官网都有详细的文档说明,大家自行百度谷歌哈! artZoom:常用于微博,支持图片放大缩小旋转 AutoComplete:自动完成 BackTop:当内容多时出现“返回顶部” CFUpload:批量上 ...

  7. Wireshark学习笔记（一）常用功能案例和技巧

    @ 目录 常用功能 1.统计->捕获属性 2.统计->协议分级 3.过滤包Apply as filter E1:过滤出特定序号的包 E2:过滤出某IP地址或端口 E3:导出php文件 E4 ...

  8. Nginx实战部署常用功能演示(超详细版)，绝对给力~~~

    前言 上次分享了一些开发过程中常用的功能,但如果到真实环境中,其实还需要一些额外的配置,比如说跨域.缓存.配置SSL证书.高可用等,老规矩,还是挑几个平时比较常用的进行演示分享.上篇详见Nginx超详 ...

  9. js实现第一次打开网页弹出指定窗口（常用功能封装很好用）

    js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...

随机推荐

  1. 如何在linux中设置tab键长度

    1. 创建文件名为 .vimrc 的系统文件 首先切换到用户根目录,然后创建文件. $ cd ~ $ vim .vimrc 2. 在文件中输入下面的内容并保存 set tabstop=4 set sh ...

  2. 运用Hibernate-Tools自动生成Java类和schema时，出现not found while looking for property...异常

    问题描述: 在使用Hibernate-tools时出现not found while looking for property...(具体信息省略). 问题分析: 我找到出错对应的hbm.xml文件, ...

  3. jquery ajax后台向前台传list 前台用jquery $.each遍历list

    $.ajax({ type: 'post', url: xxx.action', dataType: 'text', success: function(data){ var dataObj=eval ...

  4. Which PHP mode? Apache vs CGI vs FastCGI

    Which PHP mode? Apache vs CGI vs FastCGI There are multiple ways to execute PHP scripts on a web ser ...

  5. Android项目记录点滴

    服务器端:(根据Apache POI库函数其中SlideShow表示PPT文档,Slide表示某一张幻灯片) 1.先把电脑中的PPT文件读入到一个字节数组中.(输入流-->字节数组-->输 ...

  6. Linux04--文本编辑器vim

    1.Linux系统下常用的文本编辑器介绍 •  命令行方式      vi/vim: 类UNIX操作系统中常用的内置编辑器,习惯操作后功能强大.      pico或nano:一种风格很像Micros ...

  7. ID卡常见型号

    EM ID卡,主要是采用瑞士EM或台湾GK公司的4100.4102系列IC芯片 + 线圈 + 卡基封装而成. (1)4001感应式ID厚卡:台湾4001 COB 特征:普通型感应卡,厚薄适中,带有ID ...

  8. 迁移到MSYS2 与 Qt 工具链注意的几个事情（注意链接顺序，并且人造mingw工具链所没有的局部midl.exe命令）

    Microsoft Visual Studio 2015社区版提供了强大的开发体验,且 Qt 提供了预编译版本.然而,由于客户提出兼容Windows XP ~ Windows 8.1 这样宽泛的环境要 ...

  9. Qt for Android遇到的几个错误解决[Win7 + Qt5.6 +jdk 8u91]

    [1]SDK Manager无法更新Android SDK安装后需要运行SDK Manager下载安装包,默认从google网站下载,但被GWF和谐了,感谢一位网友提供的镜像站点.具体步骤是:运行SD ...

  10. Delphi SysErrorMessage 函数和系统错误信息表

    在看 API 文档时, 我们经常见到 GetLastError; 它可以返回操作后系统给的提示. 但 GetLastError 返回的只是一个信息代码, 如何返回对应的具体信息呢? FormatMes ...