当前位置: 电脑软硬件应用网 > 设计学院 > 网页特效 > 正文
[图文]如何实现对象连续平移的动画效果
如何实现对象连续平移的动画效果
2005-12-30 19:01:17  文/45IT收集   出处:电脑软硬件应用网   

  我们经常看到对象(可以是图形或文本)连续平移的动画效果,那么它是如何制作出来的呢?
  总的思路:取得一个对象的横坐标值,并利用setTimeout函数使之递增或递减从而实现对象的平移效果。
  首先我们需要在< body>TAG里定义一个对象:

 <DIV ID="blockDiv" STYLE="position:absolute; left:50; top:150; width:400;">
 <IMG SRC="baby.gif" WIDTH=100 HEIGHT=136 BORDER=0>
 </DIV>

  考虑浏览器的兼容问题,我们用以下代码段来提取对象的坐标值:(本例只提取横坐标值)

 ns4 = (document.layers)? true:false
 ie4 = (document.all)? true:false

 function init() {
 if (ns4) block = document.blockDiv
 if (ie4) block = blockDiv.style
 block.xpos = parseInt(block.left)
 }

  然后用setTimeout函数制作平移效果:

 function slide() {
 if (block.xpos < 300) {
  block.xpos += 5
  block.left = block.xpos
  setTimeout("slide()",30)
 }
 }

  别忘了在< body>里加上 onLoad="init()" ,最后做一个链接试验一下效果:

 <A HREF="javascript:slide()">滑动</A> 
服务器租用、托管;域名注册;虚拟主机
江湖、聊天室租用;程序开发,网站建设
欢迎咨询http://nicchina.com/
QQ:30196310

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    网页特效代码:仿京东的商品分类导航…
    不能屏蔽的网页右下角窗口特效
    装载页面进度条代码
    链接特效之js做引用文章链接代码
    左右移动转换文字特效HTML代码解析
    网页页面实现自动刷新的3种代码
    网页特效代码:纯css下拉菜单列表
    JS特效代码:实现间歇无缝文字滚动特…
    文字滚动特效(兼容多浏览器)
    网页特效代码:JavaScript显示系统时…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号