中国Java开发网 中国Java开发网
注册 | 登录 | 帮助 | 搜索 | 排行榜 | 发帖统计  

您没有登录

» 中国Java开发网 » AJAX讨论区  

按打印兼容模式打印这个话题 打印话题    把这个话题寄给朋友 寄给朋友    该主题的所有更新都将Email到你的邮箱 订阅主题
reply to topicflat modethreaded modego to previous topicgo to next topicgo to back
作者 用javascript实现动画效果
maq000





发贴: 1
于 2008-10-09 09:47 user profilesend a private message to userreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
大家在使用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)函数来取消计时器。
http://www.96pc.com/bc/JavaScripts/18712.html



作者 Re:用javascript实现动画效果 [Re:maq000]
future





发贴: 3
于 2009-03-12 12:50 user profilesend a private message to userreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
好样子啊



reply to topicflat modethreaded modego to previous topicgo to next topicgo to back
  已读帖子
  新的帖子
  被删除的帖子
Jump to the top of page

   Powered by Jute Powerful Forum® Version Jute 1.5.6 Ent
Copyright © 2002-2017 Cjsdn Team. All Righits Reserved. 闽ICP备05005120号
客服电话 0592-8750026    客服信箱 714923@qq.com    客服QQ 714923