javascript实现div层移动的减速效果

其实原理很简单，当一个div层从起始位置到最终终点位置(endX,endY)的过程中，假设每10ms移动一次。那么利用一个目标值(终点坐标)减去当前div层的位置除以一个定长来作为下次div层要移动的距离即可。由于每次div层的位置都会由于移动越来越接近目标点，那么越隔近终点移动速度就会越来越慢。

简单的减速效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<style type="text/css">*{margin:0px ;padding:0px;}#move{width:5px;height:5px;background:#3399CC;border-radius:10px; position:relative;}
</style>
<script type="text/javascript">function $(id){if(arguments.length==1 && "string" == typeof id){return document.getElementById(id);}}var Class={create:function(obj){return function(){this.initialize.apply(this,arguments);}}};var Extend=function(desc,src){for(var property in src){desc[property]=src[property];}return desc;};Object.prototype.extend=function(obj){return Extend.apply(this,[this,obj]);}function bind(obj , eventName, eventFn)  {  if(obj.addEventListener)  {  obj.addEventListener(eventName,eventFn,false);  }  else  if(obj.attachEvent)  {  obj.attachEvent("on"+eventName, eventFn);  }  else   {  obj["on"+eventName]=eventFn;  }  }var SlowDown=Class.create();SlowDown.prototype={initialize:function(obj,options){this.obj=$(obj);this.setOptions(options);this.step=parseInt(this.options.step);this.time=parseInt(this.options.time);},setOptions:function(options){this.options={step:20,time:10}Object.extend(this.options, options || {});},Move:function(endX,endY) //移动到指定位置{clearTimeout(this.timer);currentObj=this;var left=parseInt(this.obj.style.left) || 0;var top=parseInt(this.obj.style.top) || 0;var moveXDis=this.getStep(endX,left);    //横坐标应该移动的距离var moveYDis=this.getStep(endY,top);    //纵坐标应该移动的距离this.obj.style.left=left+moveXDis+"px";this.obj.style.top=top+moveYDis+"px";this.timer=setTimeout( function () { currentObj.Move(endX,endY) , this.time});    },getStep:function(target,now){var step=(target-now)/this.step;return step;}} function Event(event){e=document.all?window.event:event;if(document.all)   //如果是ie浏览器{e.pageX=e.clientX+document.documentElement.scrollLeft;   //获取鼠标相对于div层的坐标(x,y)e.pageY=e.clientY+document.documentElement.scrollTop;}return e;}window.οnlοad=function(){var $move=new SlowDown("move");$("range").οnclick=function(event){e=Event(event);$move.Move(e.pageX,e.pageY);}}</script>
<body><div id="range" style="border:1px solid #FF0000;width:800px;height:400px;"><div id="move"></div></div>
</body>
</html>

javascript实现div层移动的减速效果相关推荐

几行简单代码实现DIV层上显示Tooltip效果
最近在做一个项目,要在鼠标移到层上后显示出tip提示,网上找了半天,都很麻烦,就自己修改了一个,记录在下面测试在IE 7.8.9及 chrome 上没问题. <HTML> <HEA ...
Javascript弹出div层
这是一个DIV弹窗效果! 将鼠标移动到此点击这里查看弹出窗口这是文章"JavaScript弹出窗口DIV层效果代码"的演示页面,点这里查看原文! 转载于:https://www ...
html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
HTML选中时闪动效果代码,JS实现点击文字对应DIV层不停闪动效果的方法
本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错 ...
用div层来实现页面半透明遮罩效果
实现效果: 弹出一个窗口的时候,窗口后面的页面变暗,并且不能操作难点: 因为div 层是不能把select控件遮住的,所以要特殊处理,方法两种,一种是在弹出窗口下面加一层iframe来遮住selec ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
html叠加层,JavaScript实现多个重叠层点击切换效果的方法
本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtm ...
CSS实现Div层背景半透明而内容不透明的效果
CSS实现Div层背景半透明而内容不透明的效果 2014年5月18日 MK 前端设计 0 阅读 2932次前几天有一个学弟问我,怎么样能实现Div层背景半透明而内容不透明的效果呢,他写的效果不管怎么 ...
html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果
jQuery实现浮动层跟随页面滚动效果 #main{height:2000px} .demo{width:180px; height:250px; margin:10px; border:2px so ...

javascript实现div层移动的减速效果

javascript实现div层移动的减速效果相关推荐

最新文章

热门文章