用JavaScript实现动画效果的方法_javascript技巧
程序员文章站
2022-04-21 13:07:04
...
其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家
演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果。
这个实例的效果是点击网页上的“开始移动”按钮,则其中的指定图层就会从左到右移动,在这个过程中你点击“停止移动”按钮就会停止移动。
JavaScript Motion Sample
这里主要使用了一个叫setTimeout(function, interval)函数,这个函数的参数格式为:
第一个参数“function”为超时后调用的函数名,第二个参数“interval”为超时值,以微秒为单位。
注意一点是如果要停止这个计时器,必须保存调用这个setTimeout()函数后的返回值,通过clearTimeout(id)函数来取消计时器。
演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果。
这个实例的效果是点击网页上的“开始移动”按钮,则其中的指定图层就会从左到右移动,在这个过程中你点击“停止移动”按钮就会停止移动。
复制代码 代码如下:
I can moving... |
这里主要使用了一个叫setTimeout(function, interval)函数,这个函数的参数格式为:
第一个参数“function”为超时后调用的函数名,第二个参数“interval”为超时值,以微秒为单位。
注意一点是如果要停止这个计时器,必须保存调用这个setTimeout()函数后的返回值,通过clearTimeout(id)函数来取消计时器。
推荐阅读
-
比较精简的Javascript拖动效果函数代码_javascript技巧
-
javascript 文本框水印/占位符(watermark/placeholder)实现方法_javascript技巧
-
js弹出模式对话框,并接收回传值的方法_javascript技巧
-
从URL中提取参数与将对象转换为URL查询参数的实现代码_javascript技巧
-
javascript在myeclipse中报错的解决方法_javascript技巧
-
JavaScript简单修改窗口大小的方法_javascript技巧
-
javascript 简单抽屉效果的实现代码_javascript技巧
-
JavaScript中的apply()方法和call()方法使用介绍_javascript技巧
-
静态页面也可以实现预览 列表不同的显示方式[原创]_javascript技巧
-
js实现点击注册按钮开始读秒倒计时的小例子_javascript技巧