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需再刷新一下页面才能执行]

您可能感兴趣的文章:

平滑移动

用javascript实现旋转图片效果的代码
用javascript实现旋转图片效果的代码...
2007-11-11
图片分页查看
图片分页查看...
2006-08-08
JS实现鼠标移动到缩略图显示大图的图片放大效果
一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。
2012-12-12
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
这是一个网上比较常用的JS网页图片查看器，可控制图片放大、缩小、还原、移动位置、拖动等操作，并且兼容IE浏览器和FF火狐浏览器，可以用在图片网站、地图网站等
2008-11-11
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
一般页面的的图片为了布局考虑，显示大小都小于实际大小。鼠标在图片上移动时，在旁边展示一个跟此图片显示大小一样的层。并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。
2009-04-04
比较不错的一款图片广告效果
比较不错的一款图片广告效果...
2007-06-06
自适应图片大小的弹出窗口
[蓝色]自适应图片大小的弹出窗口...
2006-07-07
javascript 图片放大缩小功能实现代码
很早以前写的一个效果，今天有时间了整理出来通过 Math.pow(x,y) 的“幂”运算来计算大小图片放大缩小的尺寸
2011-07-07
一段实现页面上的图片延时加载的js代码
效果可以直接看淘宝的商品分类页、还有QQ的商城页
2010-02-02
利用javascript解决图片缩放及其优化的代码
说起IE6，真是让我们这些做前端的人又恨又无奈，许多属性都不支持。可不少用户还在用它，我们也不能无视。为了兼容，我只好跟同事请教了一下，然后针对IE6用js缩放来显示图片并进行了一些细节上的优化
2012-05-05