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

2024-09-29 11:37:31

本文实例讲述了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:200px;background:red;left:0;"></div>
<div id="odiv1" style="position:absolute;width:200px;height:200px;background:red;left:0;top:250px;"></div>
<script type="text/javascript">
var odiv=document.getElementById('odiv');
var odiv1=document.getElementById('odiv1');
odiv.onclick=function(){move(odiv,500);}
odiv1.onclick=function(){move(odiv1,500);}
function move(obj,target){
  clearInterval(dt);
var dt=setInterval(function(){
var ol=parseInt(obj.style.left);
  if(ol==target){
    clearInterval(dt);
  }else{
var speed=(target-ol)/8;
    speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
    obj.style.left=ol+speed+"px";
  }
  },30);
}
</script>
</body>
</html>

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

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

JS弹性运动实现方法分析

本文实例分析了JS弹性运动实现方法.分享给大家供大家参考,具体如下: 描述:像弹簧一样左右弹动,最后缓慢停下来一.加减速运动 1.加速运动 var iSpeed=0; iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20; iSpeed--; 速度越来越慢,降到0后开始变负值往反方向运动二.弹性运动 1.在目标点左边,加速:目标点右边,减速,如 if(div1.offsetLeft<300){ iSpeed=iSpeed+1; //等同iSpeed++; }
JS多物体任意值链式缓冲运动

复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h
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" /> <title&g
简单实现js间歇或无缝滚动效果

间歇.无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{margin:0;padding:0;} .box{width: 500px;height: 400p
JavaScript中的匀速运动和变速(缓冲)运动详细介绍

一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码代码如下
原生javascript实现匀速运动动画效果

本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;
JavaScript缓冲运动实现方法(2则示例)

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

本文实例分析了js实现的多个物体运动功能.分享给大家供大家参考,具体如下: 与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var timer=null; var i; for(i=0;i<aDiv.length;i++)
js实现缓冲运动效果的方法

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

效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 复制代码代码如下: <head runat="server"> <title></title> <style type="text/css"> div { width: 100px
JS碰撞运动实现方法详解

本文实例分析了JS碰撞运动实现方法.分享给大家供大家参考,具体如下: 描述:撞到目标点弹回来(速度反转) 一.无重力的漂浮div var div1=document.getElementById("div1"); var iSpeedX=6; var iSpeedY=8; setInterval(function(){ var l=div1.offsetLeft+iSpeedX; var t=div1.offsetTop+iSpeedY; if(t>=document.docum

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

相关推荐

随机推荐