javascript关于运动的各种问题经典总结

2024-12-22 01:35:30

本文实例总结了javascript关于运动的各种问题。分享给大家供大家参考。具体如下：

一、JS运动的各种问题

问题一：

错误代码：

function startMove(){
 var timer=null;
 var div1=document.getElementById("div1");
 if (div1.offsetLeft==300){
  clearInterval(timer);
 }else{
  timer=setInterval(function(){
   div1.style.left=div1.offsetLeft+10+"px";
  },30)
 }
}

希望实现的功能：

打开定时器timer，让div1运动到300px，然后让div1停下即关掉定时器。

错误之处：

if语句错误，代码首先设置一个null定时器timer，然后如果div1的左边距为300px，则关掉定时器timer。否则一直运动。但是if并不是循环语句，if语句执行一次之后将不再执行。所以永远不会关闭定时器。

正确代码：

var timer=null;
function startMove(){
 var div1=document.getElementById("div1");
 timer=setInterval(function(){
  if (div1.offsetLeft==300){
   clearInterval(timer);
  }
  div1.style.left=div1.offsetLeft+10+"px";
 },30)
}

问题二:
错误代码：

function startMove(){
 var speed=1;
 var timer=null;
 var oDiv1=document.getElementById("div1");
 clearInterval(timer);
 timer=setInterval(function(){
  if (oDiv1.offsetLeft>=300){
   clearInterval(timer);
  }else{
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
  }
 },30)
}

希望实现的功能：

连续点击开始按钮，div1会加速，这是因为每当点击按钮一次，就会开启一个定时器，累积起来就会加速，所以要在开启定时器之前不管有没有定时器开启都要先关闭一次定时器。但是添加了关闭定时器的clearInterval方法之后，依然会加速。
错误之处：
将timer变量放在了startMove方法里面，相当于每点击一次按钮，就会执行一次startMove方法，生成了一个闭包，因此创建了一个局部timer，每一个闭包当中的timer并不会共享，所以还是相当于生成了点击次数的闭包timer。

正确代码：

var timer=null;
function startMove(){
 var speed=1;
 var oDiv1=document.getElementById("div1");
 clearInterval(timer);
 timer=setInterval(function(){
  if (oDiv1.offsetLeft>=300){
   clearInterval(timer);
  }else{
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
  }
 },30)
}

实现分享栏进出功能：
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #div1{
   width: 150px;
   height: 200px;
   background: burlywood;
   position: absolute;
   left: -150px;
  }
  span{
   width: 20px;
   height: 60px;
   position: absolute;
   background: gold;
   right: -20px;
   top: 70px;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById("div1");
   oDiv1.onmouseover=function(){
    move(0);
   };
   oDiv1.onmouseout=function(){
    move(-150);
   };
  };
  var timer=null;
  function move(target){
   var oDiv1=document.getElementById("div1");
   var speed=0;
   if (oDiv1.offsetLeft<target){
    speed=10;
   }else{
    speed=-10;
   }
   clearInterval(timer);
   timer=setInterval(function(){
    if(oDiv1.offsetLeft==target){
     clearInterval(timer);
    }else{
     oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
    }
   },30);
  }
 </script>
</head>
<body>
<div id="div1">
 <span id="span1">分享到</span>
</div>
</body>
</html>

实现图片淡入淡出功能：
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  #div1{
   width: 200px;
   height: 200px;
   background: red;
   position: absolute;
   filter: alpha(opacity:30);
   opacity: 0.3;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById("div1");
   oDiv1.onmouseover=function(){
    move(100);
   };
   oDiv1.onmouseout=function(){
    move(30);
   };
  };
  var timer=null;
  var alpha=30;
  function move(target){
   var oDiv1=document.getElementById("div1");
   var speed=0;
   clearInterval(timer);
   if(alpha<target){
    speed=10;
   }else{
    speed=-10;
   }
   timer=setInterval(function(){
    if (alpha==target){
     clearInterval(timer);
    }else{
     alpha+=speed;
     oDiv1.style.filter="alpha(opacity:"+alpha+")";
     oDiv1.style.opacity=alpha/100;
    }
   },30);
  };
 </script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

注意点：

1.因为在透明度上JavaScript并没有像左边距（offsetLeft）这样的属性。所以用一个alpha变量代替。
2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题，ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")"；
chrome和火狐为oDiv1.style.opacity=alpha/100。
实现滚动条事件：
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #div1{
   width: 100px;
   height: 100px;
   background: yellowgreen;
   position: absolute;
   bottom: 0px;
   right: 0px;
  }
 </style>
 <script>
  window.onscroll=function(){
   var oDiv=document.getElementById("div1");
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
  };
  var timer=null;
  function move(target){
   var oDiv=document.getElementById("div1");
   clearInterval(timer);
   timer=setInterval(function(){
    var speed=(target-oDiv.offsetTop)/10;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if (oDiv.offsetTop==target){
     clearInterval(timer);
    }else{
     oDiv.style.top=oDiv.offsetTop+speed+'px';
    }
   },30)
  };
 </script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

二、JS多物体运动的各种问题

问题一：

希望实现的功能：三个平行div自由的平行缩放。
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div{
   width: 100px;
   height: 50px;
   background: yellow;
   margin: 10px;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv=document.getElementsByTagName('div');
   for (var i=0;i<oDiv.length;i++){
    oDiv[i].timer=null;
    oDiv[i].onmouseover=function(){
     move(300,this);
    };
    oDiv[i].onmouseout=function(){
     move(100,this);
    };
   }
  };
  function move(iTarget,oDiv){
   clearInterval(oDiv.timer);
   oDiv.timer=setInterval(function(){
    var speed=(iTarget-oDiv.offsetWidth)/5;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if (iTarget==oDiv.offsetWidth){
     clearInterval(oDiv.timer);
    }else{
     oDiv.style.width=oDiv.offsetWidth+speed+"px";
    }
   },30);
  }
 </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

注意事项：

多物体运动如果只是设置一个定时器（设置全局定时器）的话，那么三个div共用一个一个全局定时器，那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作，由于定时器是全局的，那么上一个div的定时器将被覆盖即取消掉，故上一个定时器无法完全地昨晚缩小动作，解决办法是给每一个div设置一个属性timer。

问题二：

希望实现的功能：多图片的淡入淡出。
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div{
   width: 200px;
   height: 200px;
   margin: 10px;
   background: yellow;
   float: left;
   filter: alpha(opacity:30);
   opacity: 0.3;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv=document.getElementsByTagName('div');
   for(var i=0;i<oDiv.length;i++){
    oDiv[i].timer=null;
    oDiv[i].alpha=30;
    oDiv[i].onmouseover=function(){
     move(100,this);
    };
    oDiv[i].onmouseout=function(){
     move(30,this);
    };
   }
  };
  function move(iTarget,obj){
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
    var speed=(iTarget-obj.alpha)/30;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if (obj.alpha==iTarget){
     clearInterval(obj.timer);
    }else{
     obj.alpha+=speed;
     obj.style.filter="alpha(opacity:"+obj.alpha+")";
     obj.style.opacity=obj.alpha/100;
    }
   },30);
  }
 </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

希望实现的功能：多物体不同方向的伸缩功能。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div{
   width: 100px;
   height: 100px;
   margin: 10px;
   background: yellow;
   float: left;
   border: 10px solid black;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById('div1');
   var oDiv2=document.getElementById('div2');
   oDiv1.timer=null;
   oDiv2.timer=null;
   oDiv1.onmouseover=function(){
    move(this,400,'height');
   };
   oDiv1.onmouseout=function(){
    move(this,100,'height');
   };
   oDiv2.onmouseover=function(){
    move(this,400,'width');
   };
   oDiv2.onmouseout=function(){
    move(this,100,'width');
   };
  };
  function getStyle(obj,name){
   if(obj.currentStyle){
    return obj.currentStyle[name];
   }else{
    return getComputedStyle(obj,false)[name];
   }
  };
  function move(obj,iTarget,name){
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
    var cur=parseInt(getStyle(obj,name));
    var speed=(iTarget-cur)/30;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
     clearInterval(obj.timer);
    }else{
     obj.style[name]=cur+speed+"px";
    }
   },30);
  };
 </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

注意事项：

1.offsetwidth所获得的并不只是物体的纯宽度，还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中，本意是希望图片缩小以1px的速度匀速缩小，但是如果将边框的宽度设置为1px而非0px，那么offsetwidth的值其实是obj的width（注意：不是style.width即不是行间的width）+2，上面这句变成了obj.style.width=obj的width+2-1+“px”；图像反而增大了。解决的办法就是不用offsetwidth，而用obj的width。width通过getStyle方法获得。
2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。

完整的运动框架：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  #div1{
   width: 200px;
   height: 200px;
   margin: 20px;
   background: yellow;
   border: 5px solid black;
   filter: alpha(opacity:30);
   opacity: 0.3;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById('div1');
   oDiv1.timer=null;
   oDiv1.onmouseover=function(){
    move(this,100,'opacity');
   };
   oDiv1.onmouseout=function(){
    move(this,30,'opacity');
   };
  };
  function getStyle(obj,name){
   if(obj.currentStyle){
    return obj.currentStyle[name];
   }else{
    return getComputedStyle(obj,false)[name];
   }
  };
  function move(obj,iTarget,name){
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
    var cur=0;
    if(name=='opacity'){
     cur=Math.round(parseFloat(getStyle(obj,name))*100);
    }else{
     cur=parseInt(getStyle(obj,name));
    }
    var speed=(iTarget-cur)/30;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
     clearInterval(obj.timer);
    }else{
     if(name=='opacity'){
      obj.style.opacity=(cur+speed)/100;
      obj.style.filter='alpha(opacity:'+cur+speed+')';
     }else{
      obj.style[name]=cur+speed+"px";
     }
    }
   },30);
  };
 </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

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

基于原生js运动方式关键点的总结(推荐)

主要方法:定时器的运用 setInterval(funnction(){},30); 为了避免最后时刻速度即将停止时的误差,可以采用下面的方法: if(iSpeed<1)//速度足够小的时候,让速度直接为0,避免速度的波动 { iSpeed = 0; } 绝对值的运用(主要运用于弹性运动等速度有正负的情况): Math.abs(2.5)// 2 弹性运动和摩擦力的组合: iSpeed+=(iTarget-obj.offsetLeft)/5; iSpeed*=0.7; 模拟摩擦力: iSpeed*
浅析JS运动

物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法: 1.运动的物体使用绝对定位 2.通过改变定位物体的属性(left.right.top.bottom)值来使物体移动.例如向右或左移动可以使用offsetLeft(offsetRight)来控制左右移动. 步骤: 1.开始运动前,先清除已有定时器 (因为:是连续点击按钮,物体会运动越来越快,造成运动混乱) 2.开
js运动应用实例解析

本文为大家提供了两个js运动应用实例,分享给大家,具体实现内容如下应用1,完成如下效果: js代码如下: <script src="move.js"></script> <script> window.onload=function () { var oDiv=document.getElementById('play'); var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagNa
javascript关于运动的各种问题经典总结

本文实例总结了javascript关于运动的各种问题.分享给大家供大家参考.具体如下: 一.JS运动的各种问题问题一: 错误代码: function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInterval(timer); }else{ timer=setInterval(function(){ div1.style.l
工作中比较实用的JavaScript验证和数据处理的干货(经典)

在开发web项目的时候,难免遇到各种对网页数据的处理,比如对用户在表单中输入的电话号码.邮箱.金额.身份证号.密码长度和复杂程度等等的验证,以及对后台返回数据的格式化比如金额,返回的值为null,还有对指定日期之前或之后某一天或某一月的计算. 遇到需要对数据及表单验证的,我相信大家都像我一样,喜欢在网上找相关的方法,因为自己写的话,是比较耗时的.今天就给大家分享一下,自己在工作中总结的一些常用的js. 关键代码如下所示: /** * 验证密码复杂度(必须包含数字字母) * @param str
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缓冲运动实现方法(2则示例)

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

本文实例讲述了javascript弹性运动效果简单实现方法.分享给大家供大家参考,具体如下: 弹性运动实现原理:加速运动+减速运动+摩擦运动运行效果截图如下: 实例代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px
Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)

大家一听这名字就知道,有了这套框架网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov
JavaScript 创建运动框架的实现代码

封装好的运动框架Move(obj,attr,iTarget),可直接调用: 可用于设置width.border.fontSize.marginLeft.opacity等许多常见属性值的变速变化,实现各种有趣效果. 兼容IE和FF. 复制代码代码如下: /**************** * * IE-BUG: * 在IE中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值. * * obj:元素对象. at
收藏Javascript中常用的55个经典技巧

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取.防止复制 3. onpaste="return false"
this,this,再次讨论javascript中的this,超全面(经典)

JavaScript 是一种脚本语言,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.本文仅采撷其中的一例:JavaScript 中的 this 关键字,深入浅出的分析其在不同情况下的含义,形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法.可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛. 至于js中this这个
javascript实现C语言经典程序题

最近在学习Javascript语言,看到网上很多都是在介绍Javascript如何解决网页上问题的代码,所以想另辟蹊径,用Javascript代码来实现C语言经典程序题.当然,这些C语言程序题也是比较简单,主要想通过Javascript语言实现,起到语法练习作用,也想来对比一下C语言和Javascript语言实现的相同点和不同点,从而巩固记忆,加强学习效果!!! 一.C语言经典程序题1 1. 题目描述: 马克思的手稿中有这样一道有趣的数学题:有30个人,其中有男人,女人,小孩.他们在一家饭馆中吃

javascript关于运动的各种问题经典总结

相关推荐

随机推荐