当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用JavaScript实现动画效果

Javascript
一个js写的日历（代码部分网摘）
IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
jquery 子窗口操作父窗口的代码
用JavaScript隐藏控件的方法
js 冒泡事件与事件监听使用分析
ie与ff下的event事件
比较全面的event对像在IE与FF中的区别 推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
JavaScript 变量命名规则
没有form表单情况下敲回车键提交表单的js代码
jQuery 使用手册(四)
jQuery 使用手册(六)
jQuery 使用手册(七)
Javascript 数组添加一个 indexOf 方法的实现代码
Javascript 数组添加 shuffle 方法的实现代码
Javascript 两个窗体之间传值实现代码
Javascript showModalDialog两个窗体之间传值
js 覆盖和重载 函数
JavaScript中Object和Function的关系小结
javascript parseInt 大改造

No. « 186 187 188 189 »

技术文章搜索

关键字

Javascript 中的 用JavaScript实现动画效果

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 332 ::
收藏到网摘: n/a

　　大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家

演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。

　　这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按钮就会停止移动。

　　<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)函数来取消计时器。