JavaScript妙味课堂物体平滑移动特效

更新时间：2010年09月25日 01:31:54 作者：

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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript物体平移运动特效</title> <style> #div1 {background: red url(https://www.jb51.net/images/logo.gif); position:absolute; left:50px; top:50px; width:200px; height:200px;} </style> <script type="text/javascript"> var g_oTimer=null; function startMove() { if(!g_oTimer) { g_oTimer=setInterval(moveTimerHandler, 30); } } function moveTimerHandler() { var oDiv=document.getElementById('div1'); var iSpeed=5; if(oDiv.offsetLeft>=300) { clearInterval(g_oTimer); g_oTimer=null; } else { oDiv.style.left=oDiv.offsetLeft + iSpeed + 'px'; } } window.onload=function () { var oBtn=document.getElementById('btn_start_move'); oBtn.onclick=startMove; }; </script> </head> <body> <div id="div1"></div> <input id="btn_start_move" type="button" value="开始运动" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

平滑移动

JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
这次接着来介绍PhotoLook（前文介绍的组件）现在可供使用的属性和方法，接着展示一个叫前文不一样的例子
2010-11-11
javascript实现的一个图片转移效果
javascript实现的一个图片转移效果...
2007-06-06
感应鼠标的图片遮罩动画效果
感应鼠标的图片遮罩动画效果，鼠标放上后会动画显示文字提示，有意思哦，有兴趣的朋友运行一下看效果。
2010-10-10
js循环输出图片，不足的要补0
群了朋友需要循环输出数字顺序的图片，就是前面需要加0补到3为图片，所以我给出了下面的代码
2008-06-06
img的onload的另类用法
2008-01-01
從博客網扣了一個效果出來
從博客網扣了一個效果出來...
2007-05-05
JavaScript妙味课堂物体平滑移动特效
JavaScript妙味课堂上的一个教学实例，物体平移运动特效，点击按钮后激活函数，控制图片在一定时间内匀速运动，是最简单、最基础的运动方式，其特点是运动的方向和速度都不发生改变。
2010-09-09
多图幻灯Wipe擦洗效果
多图幻灯Wipe擦洗效果...
2006-12-12
图片展示效果鼠标经过变大图，支持FF
图片展示效果，鼠标经过变大图，支持FF 类似FLASH一样漂亮
2009-08-08
javascript实现的三维正方体(兼容ie7,ff)
2008-02-02