最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Javascript匀速运动应用-网站分享功能
时间:2014-12-17 编辑:简简单单 来源:一聚教程网
网站上会经常用到Javascript 中的运动,这次与大家分享一下一些运动的基本应用 。 方便大家在开发中能够直接使用。
代码简单易懂,适用于初学者。最后会一步一步整理出一套自己的运动框架。
应用案例效果图:
鼠标移动到分享上 ,左边的div就会显示出来。移开会自己恢复。相信这个大家都会用到 很实用,下面看看代码是如何实现的。
代码如下 | 复制代码 |
代码如下 | 复制代码 |
分享到 |
以下是Javascript 代码
代码如下 | 复制代码 |
思路:
样式中初始的left是-150 这样div就是缩在里面,给0 就会显示出来。 那么我们只要变动这个值就可以了
startMove 中的参数 iTarget 是目标点 ,表示到哪个目标点会停下来。
控制speed 的大小 就能控制运动的快慢。如果达到目标点 就停止定时器 。
规律:
* 假设
* left:30 iTarget:300 得出 往右 为正
* left:600 iTarget:50 得出 往左 为负
*
* 通过当前位置left 与目标点的 关系 iTarget 推断出 速度的正负
注意: 一上来就要关了定时器,因为是每次移动到分享到,都会开个定时器,开的越多相对来说速度就越快,因为同时会有多个定时器执行。
所以每次要保证一个定时器工作。
遵循:函数功能一样,参数越少越好的原则 ,所以根据上面的规律把speed 并不是作为参数传入。
举个生活中的例子:你打车,告诉出租车司机已100码的速度到哪哪哪,一般是不可能的吧。打车你不可能告诉师傅你要跑多快
所以程序也是一样的,这里就把速度这个传参去掉了。
当然现在的这个运动框架还会有许多问题,在之后会陆续解决。
-
上一个: 分享一个纯html5制作的时钟源码实例
相关文章
- 利用JavaScript创建视差效果的网站 01-13
- 网站javascipt挂马10种方法分析 08-30
- 网站成功绝招让你一月上万IP的方法 04-16
- 网站IP提高不上去五大原因 09-21
- 网站极致推广方法 如何一个月内打造10000IP 08-02
- 网站流量达日IP3000的方法 02-27