用JavaScript实现动画效果的方法

其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家
演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。
　　这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按钮就会停止移动。


代码如下:

　　<html>
　　<head>
　　<title>JavaScript Motion Sample</title>
　　<script language="JavaScript">
　　var movingID = null;
　　var scrolling = false;
　　function startMove()
　　{
　　 var left = eval(div1.style.left.replace("px", ""));
　　 if (left < document.body.scrollWidth - 150)
　　  div1.style.left = left + 1;
 　　else
 　　 div1.style.left = 10;
　　 movingID = setTimeout("startMove()", 10);
　　}
　　function stopMove()
　　{
　　 clearTimeout(movingID);
　　}
　　</script>
</head>
　　<body>
　　<div id="div1" style="visibility:visible; position:absolute; left:10; top:10; z-index:1;">
　　 <table bgColor="#FFFFCC" border="1"cellPadding="0" cellSpacing="0">
　　  <tr>
　　   <td>I can moving...</td>
　　  </tr>
　　 </table>
　　</div>
　　<br><br>
　　<input type="button" value="开始移动" onClick="startMove()">
　　<input type="button" value="停止移动" onClick="stopMove()">
　　　</body>
　　</html>

　　这里主要使用了一个叫setTimeout(function, interval)函数，这个函数的参数格式为：
　　第一个参数“function”为超时后调用的函数名，第二个参数“interval”为超时值，以微秒为单位。
　　注意一点是如果要停止这个计时器，必须保存调用这个setTimeout()函数后的返回值，通过clearTimeout(id)函数来取消计时器。

赞 (0)

相关推荐

  • JavaScript实现动画打开半透明提示层的方法

    本文实例讲述了JavaScript实现动画打开半透明提示层的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • JavaScript实现鼠标滑过处生成气泡的方法

    本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;">

  • javascript转换静态图片，增加粒子动画效果

    使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib <!DOCTYPE html> <html> <head> <title>particle image</title> <meta charset="utf-8" /> <style> #logo { margin-left:20px; margin-top:20px; width:160px; hei

  • JavaScript生成的动态下雨背景效果实现方法

    本文实例讲述了JavaScript生成的动态下雨背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODY bgcolor="#fef4d2" > <center> <script language=JavaScript> <!-- [

  • JavaScript随机生成信用卡卡号的方法

    本文实例讲述了JavaScript随机生成信用卡卡号的方法.分享给大家供大家参考.具体分析如下: 这段JS代码根据信用卡卡号产生规则随机生成信用卡卡号,是可以通过验证的,仅供学习参考,请不要用于非法用途,否则后果自负. var visaPrefixList = new Array( "4539", "4556", "4916", "4532", "4929", "40240071", &

  • JavaScript生成福利彩票双色球号码

    福利彩票的双色球号码是由6个红球号码和1个篮球号码组成的,其中,6个红球号码是从01到33中随机抽出的6个数字,1个篮球号码是从01到16中随机抽出的1个数字.6个红球号码通常按照从小到大的顺序排列.下面是JavaScript中生成一注双色球号码的方法,供大家参考! var redBall = new Array(); var redLen = redBall.length; while(redLen<6){ var ball = ranNumber(1,33); var flag = true

  • javascript+html5实现绘制圆环的方法

    本文实例讲述了javascript+html5实现绘制圆环的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <fiel

  • JS实现生成会变大变小的圆环实例

    JS实现生成会变大变小的圆环实例

    本文实例讲述了JS实现生成会变大变小的圆环.分享给大家供大家参考.具体如下: 这里使用javascript生成圆环,会变大变小,对于研究如何利用JavaScript生成动画效果,这是个很好的范例. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • 用JavaScript实现动画效果的方法

    其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果. 这个实例的效果是点击网页上的"开始移动"按钮,则其中的指定图层就会从左到右移动,在这个过程中你点击"停止移动"按钮就会停止移动. 复制代码 代码如下: <html> <head> <title>JavaScript Motion Sample</title> <sc

  • JS实现超炫网页烟花动画效果的方法

    本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • js实现横向百叶窗效果网页切换动画效果的方法

    本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 复制代码 代码如下: <html> <head> <title>js网页百叶窗动态切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0

  • js实现类似jquery里animate动画效果的方法

    本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

  • jQuery实现菜单感应鼠标滑动动画效果的方法

    本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JavaScript反弹动画效果的实现代码

    JavaScript反弹动画效果的实现代码

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:200px; height:200px; position: absolute; top:0; left:200px; background:lightblue

  • jQuery实现基本动画效果的方法详解

    jQuery实现基本动画效果的方法详解

    本文实例讲述了jQuery实现基本动画效果的方法.分享给大家供大家参考,具体如下: animate()方法用于创建自定义动画 语法: $(selector).animate({params},speed,callback); params:必须 定义形成动画的CSS属性 speed:可选  规定效果的时常:slow,fast或毫秒 callback:可选  动画完成后所执行的函数名称. jQuery animate()--操作多个属性 默认情况下,所有HTML元素的位置都是静态的,并且无法移动,

  • vue实现购物车抛物线小球动画效果的方法详解

    vue实现购物车抛物线小球动画效果的方法详解

    本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,

  • vue动画效果实现方法示例

    vue动画效果实现方法示例

    本文实例讲述了vue动画效果实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue动画</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js&

  • javascript搜索框效果实现方法

    本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

随机推荐