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程序设计有所帮助。

赞 (0)

相关推荐

  • 原生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实现侧边栏鼠标经过弹出框+缓冲效果

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

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

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

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

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

  • 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">

  • 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]; }

  • 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多物体实现缓冲运动效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl

  • jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

    本文实例讲述了jQuery实现横向带缓冲的水平运动效果.分享给大家供大家参考,具体如下: 这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果. 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • js 实现Material UI点击涟漪效果示例

    js 实现Material UI点击涟漪效果示例

    目录 正文 HTML CSS JS 实现效果 正文 我个人而言还是挺喜欢Material UI这套设计风格的.一些细节方面做的还不错.就比如今天要给大家分享的点击涟漪效果.Material UI里面叫做Ripples.好了,话不多说,开始吧. HTML <div class="example">Click me</div> CSS .example { position: relative; width: 300px; height: 300px; line-h

  • JS技巧动手实现红包兔子雨效果示例详解

    目录 前言 展示效果 技术栈 思考与实现 红包下落效果 生成红包雨 打开红包效果 兔子雨效果 拓展 设置中奖概率 后记 前言 人生天地之间,若白驹过隙,忽然而已.不知不觉中,2022年已然逝去,2023年也过去了半个月了.看到「兔了个兔」这个活动几天了,不过这周比较忙,没时间参与. 心血来潮,捣鼓了一晚上,实现一个兔年的红包雨(兔子雨)效果~ 展示效果 技术栈 Vue2 SCSS:实现红包雨(兔子雨)效果.按钮交互效果等. 思考与实现 首先,思考一下最终的展示效果:在屏幕上会有很多随机下落的兔子

  • JS简单封装的图片无缝滚动效果示例【测试可用】

    本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!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" lang="

  • JS实现的DIV块来回滚动效果示例

    JS实现的DIV块来回滚动效果示例

    本文实例讲述了JS实现的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="t

  • JS实现的邮箱提示补全效果示例

    JS实现的邮箱提示补全效果示例

    本文实例讲述了JS实现的邮箱提示补全效果.分享给大家供大家参考,具体如下: 现在要实现的是类似网易登录时的邮箱提示框的效果,不过这里我打算稍微改变一下,就是在输入@的时候再出现邮箱提示列表 实现提示的原理是采用正则进行匹配 效果图如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>邮箱补全提示</title> <sty

  • 原生JS实现多个小球碰撞反弹效果示例

    原生JS实现多个小球碰撞反弹效果示例

    本文实例讲述了原生JS实现多个小球碰撞反弹效果.分享给大家供大家参考,具体如下: 实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y值增加,以上的思路可以实现小球的碰壁反弹 小球与小球之间的碰撞,要判断小球在被撞小球的哪个方向,从而判断小球该向哪个方向移动,同样的改变小球的坐标值,来实现小球的反弹 实现代码: <!doctype html> &l

  • JS实现的简单折叠展开动画效果示例

    JS实现的简单折叠展开动画效果示例

    本文实例讲述了JS实现的简单折叠展开动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE = html> <html> <head> <title>www.jb51.net JS折叠展开动画</title> <style> body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:rel

随机推荐