JS实现物体带缓冲的间歇运动效果示例

本文实例讲述了JS实现物体带缓冲的间歇运动效果。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="content-type" charset="utf-8" />
  <meta http-equiv="content-type" content="text/html" />
  <title>demo</title>
</head>
<body>
<div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
odiv.onmouseover=function(){
move(this,'width',500,function(){
move(odiv,'left',300,function(){
move(odiv,'height',500,function(){
move(odiv,'borderWidth',10)
});
});
});
}
function move(obj,arr,target,fn){
  clearInterval(obj.dt);
  obj.dt=setInterval(function(){
  obj.ol=parseInt(obj.style[arr]);
  if(obj.ol==target){
    clearInterval(obj.dt);
    if(fn) fn();
  }else{
  obj.speed=(target-obj.ol)/8;
    obj.speed>0?obj.speed=Math.ceil(obj.speed):obj.speed=Math.floor(obj.speed);
    obj.style[arr]=obj.ol+obj.speed+"px";
  }
  },30);
}
</script>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2016-12-21

JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!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">

JS实现侧边栏鼠标经过弹出框+缓冲效果

可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框. 首先,我们用两个div来简单布局以下页面: <div id="box"> <div id="share">分享到</div> </div> 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,然后把外层div定位到屏幕左外测,left的值与宽度相等,刚好隐藏掉就可以.当鼠标经过时,再通过改变left的值使外层div显示出来. <

javascript 缓冲运动框架的实现

javascript 缓冲运动框架的实现 框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架. 实例代码: /** * Created by wang on 2016/8/3. */ //获取非行间样式和行间样式 function getStyle(obj,name) { if(obj.currentStyle){ return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; }

javascript匀速动画和缓冲动画详解

关于网页中的动画,在css3中我们已经可以使用一些属性快速的做出来,但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画. 使用js做动画最重要的一个函数就是setInterval函数,这里不再赘述,不懂可以直接百度用法.本文主要讲动画的原理已经在制作过程中的要点. 老规矩,先上代码,能直接看懂的可以节省时间. html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charse

原生js实现返回顶部缓冲效果

运行原理 通过定时器30毫秒执行一次滚动条上升,每次上升的高度为当前高度的80%,这样就达到了上升缓冲的动画效果. 判断当滚动条高度超过一屏时,按钮显示,默认隐藏 知识要点 scrollTop//获取滚动条高度 需要写兼容 clientHeight//可视窗口高度 需要写兼容 setInterval//定时器 window.onscroll//滚动触发事件 完整代码 <!DOCTYPE html> <html lang="en"> <head> &l

JavaScript缓冲运动实现方法(2则示例)

本文实例讲述了JavaScript缓冲运动实现方法.分享给大家供大家参考,具体如下: 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):

js实现缓冲运动效果的方法

本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO

js实现交换运动效果的方法

本文实例讲述了js实现交换运动效果的方法.分享给大家供大家参考.具体分析如下: 实现后的效果,点击互相交换位置和距离左边和上角的信息. 要点一: var now = s_pic_li[0]; for(var i=0; i<s_pic_li.length; i++){ s_pic_li[i].onclick = function(){ if(this == now) return false; var w = now.offsetWidth; var h = now.offsetHeight; v

JS实现的缓冲运动效果示例

本文实例讲述了JS实现的缓冲运动效果.分享给大家供大家参考,具体如下: 缓冲需要用到数值取整,向上取整:Math.ceil()  向下取整Math.floor() 移动的速度慢慢减慢的效果,移动速度=(终点位置 - 当前位置) / 一个数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

JS多物体实现缓冲运动效果示例

本文实例讲述了JS多物体实现缓冲运动效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl

js实现同一页面多个运动效果的方法

本文实例讲述了js实现同一页面多个运动效果的方法.分享给大家供大家参考.具体分析如下: 实现原理,就是在调用的时候,给这五个元素,循环加上事件.需要注意的是,每个元素的定时器需要分开. 要点一: var speed = (target - obj.offsetWidth)/8; 缓冲运动效果,一开始速度很快,然后越来越慢,直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0,则向上取整,如果速度小于0,则向下取整. 要点

js实现同一页面多个不同运动效果的方法

本文实例讲述了js实现同一页面多个不同运动效果的方法.分享给大家供大家参考.具体分析如下: 要点一: function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } 从样式表中根据id和属性名取值. 要点二: if(attr == "opacity"){ cur = Math.rou

JS实现滑动门效果的方法详解

本文实例讲述了JS实现滑动门效果的方法.分享给大家供大家参考,具体如下: 描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌,效果图如下: 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未显露的部分) 3.绑定鼠标滑过事件 window.onload=function(){ var box=document.getElementById("box"); var img=box.getEl

JS实现文字掉落效果的方法

本文实例讲述了JS实现文字掉落效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru&quo

JS实现霓虹灯文字效果的方法

本文实例讲述了JS实现霓虹灯文字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html

js实现星星打分效果的方法

本文实例讲述了js实现星星打分效果的方法.分享给大家供大家参考.具体分析如下: 很多网站都有如下图这样的星星打分效果,今天就看下用js怎么实现打分效果. 效果详解 1. 鼠标移上的时候星星点亮,下面的文字显示.鼠标移出的时候星星为灰,下面文字不显示. 2. 鼠标移到某个星星上,它之前的所有星星都会亮. 3. 鼠标移到某个星星上并点击,会显示打分结果.   代码如下 <!doctype html> <html> <head> <meta charset="