JS实现多物体运动实例分享-js教程-PHP中文网

首页

web前端

js教程

JS实现多物体运动实例分享

小云云

Jan 24, 2018 am 09:02 AM

javascript 分享实例

本文主要介绍了JS实现多物体运动的方法,结合实例形式较为详细的分析了javascript实现多物体运动的原理与相关操作技巧,需要的朋友可以参考下，希望能帮助到大家，

基本步骤

1.通过getElementsByTagName获取到要做多物体运动的元素
2.然后for循环遍历元素，添加事件
3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target

注意问题：在多物体运动中，所有的东西不能公用；

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步，2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

登录后复制

问题：

当移入移出速度比较快的时候，就会出现有的li回不到原来的样子，卡在半路了；这是因为所有的li公用了一个定时器造成的；

当鼠标移入第一个li时，调用startMove开启一个定时器；鼠标移除li时，也需要开启一个定时器让li回到原来的位置，li走到半路上，我们移入第二个li，首先会清除定时器，这时候第一个li就卡到半路了。

解决这个问题：让每个li拥有自己的timer去控制他们的变化，在for循环的时候，给每个里定义自己的一个timer

liTags[i].timer = null;// 给每个li都添加一个timer

登录后复制

接着在starMove里面每次用的定时器都是当前li 自己的，就不会互相干扰了。

这里由之前的timer变成了obj.timer (当前对象自己的timer)；到这里就没问题了。

完整代码如下：

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

登录后复制

加点样式：

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

登录后复制

完整js代码

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

登录后复制

接着在看一个例子：多物体运动-改变透明度

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7526

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

夸克网盘怎么分享到百度网盘？ Mar 14, 2024 pm 04:40 PM

　　夸克网盘和百度网盘都是很便利的存储工具，不少的用户们都在询问这两款软件互通吗？夸克网盘怎么分享到百度网盘？下面就让本站来为用户们来仔细的介绍一下夸克网盘的文件怎么保存到百度网盘方法吧。　　夸克网盘的文件怎么保存到百度网盘方法　　1、想要知道怎么把夸克网盘的文件转到百度网盘，首先在夸克网盘上下载需要保存的文件，然后打开百度网盘客户端后，选择压缩文件要保存的文件夹，双击打开该文件夹。　　2、打开该文件夹后，点击窗口左上角区域的“上传”。　　3、在电脑中找到需要上传的压缩文件，点击选

网易云音乐怎么分享到微信朋友圈_网易云音乐分享到微信朋友圈教程 Mar 25, 2024 am 11:41 AM

1、首先我们进入到网易云音乐中，然后在软件首页界面中，点击进入到歌曲的播放界面中。2、然后在歌曲播放界面中，找到右上方的分享功能按钮，如下图红框所示位置，点击选择分享的渠道;在分享渠道中，点击底部的“分享至”选项，然后选择第一个“微信朋友圈”，即可将内容分享至微信朋友圈。

百度网盘怎么分享文件给好友 Mar 25, 2024 pm 06:52 PM

近期，百度网盘安卓客户端迎来了全新的8.0.0版本，这一版本不仅带来了众多变化，还增添了诸多实用功能。其中，最为引人注目的便是文件夹共享功能的增强。现在，用户可以轻松邀请好友加入，共同分享工作和生活中的重要文件，实现更加便捷的协作与共享。那么究竟该如何分享给好友自己需要分享的文件呢，下文中本站小编就将为大家带来详细内容介绍，希望能帮助到大家！1）打开百度云APP，首先点击在首页中选择相关的文件夹，然后再点击界面右上角的【...】图标；（如下图）2）随后点击“共享成员”一栏中的【+】，最后在勾选所

芒果tv会员账号分享2023 Feb 07, 2024 pm 02:27 PM

芒果TV拥有各种类型的电影、电视剧、综艺等资源，用户可以在其中自由的选择进行观看。芒果tv会员不仅能够看到全部的VIP剧而且还能够设置最高清的画质，帮助用户爽快看剧，下面小编就给大家带来一些芒果tv免费的会员账号供用户们使用，赶紧来看一看吧。芒果tv最新会员账号免费分享2023：注意：都是收集的最新会员账号，可以直接登录使用，不要随意的修改密码。账号：13842025699密码：qds373账号：15804882888密码：evr6982账号：13330925667密码：jgqae账号：1703

解决Discuz微信分享无法显示的问题 Mar 09, 2024 pm 03:39 PM

标题：解决Discuz微信分享无法显示的问题，需要具体代码示例随着移动互联网的发展，微信成为了人们日常生活中不可或缺的一部分。在网站开发中，为了提升用户体验和扩大网站的曝光度，很多站点会集成微信分享功能，让用户能够方便地分享网站的内容到朋友圈或者微信群中。然而，有时候在使用Discuz等开源论坛系统时，会遇到微信分享无法显示的问题，这给用户体验带来了一定的困

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

分享惠普打印机驱动的两种安装方法 Mar 13, 2024 pm 05:16 PM

　　惠普打印机是很多办公室内必备的打印设备，在电脑上安装打印机驱动，可以完美解决打印机无法连接等等问题。那么惠普打印机驱动怎么安装？下面小编就给大家介绍两个惠普打印机驱动程序安装方法。　　第一种方法：官网下载驱动　　1、在搜索引擎中搜索惠普中国官网，在支持一栏中，选择【软件与驱动程序】。　　2、选择【打印机】分类，在搜索框中输入你的打印机型号，点击【提交】，即可查找到你的打印机驱动。　　3、根据你电脑的系统选择对应的打印机，win10即选择win10系统的驱动。　　4、下载成功后，在文件夹中找到

番茄小说链接如何分享 Feb 27, 2024 pm 04:20 PM

番茄小说是丰富的小说宝库，其中汇聚了海量优质的小说资源。在这里，你可以根据自己的喜好，从多种不同类型的小说中挑选出心仪之作。对于热爱阅读的你，这无疑是一片可以自由翱翔的文学天地。有的时候遇到心仪的读物也像分享给好友一起阅读，但是很多用户们还不清楚究竟该如何分享，那么这篇教程攻略就将为大家带来详细的攻略介绍，想要了解的玩家们就快来跟着本文一起阅读吧！番茄小说怎么分享书给好友？1、打开番茄小说，点击进入小说，点击右上角分享图标。2、选择分享渠道，这里小编以分享至微信好友为例。3、点击分享。4、即可查

See all articles

JS实现多物体运动实例分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题