js实现基础运动

时间：2022-09-25 13:03:01

首先我定义3个div每个div当我鼠标放上去的时候，他的宽度就表达，如下图

js实现基础运动

首先是样式和html代码

 <style>

     div{

         width:100px;

         height:50px;

         background:red;

         margin-bottom:10px;

     }

 </style>

 <body>

     <div></div>

     <div></div>

     <div></div>

 </body>

js代码如下，带注释

 <script>

 //重点是给每个对象加个定时器

     window.onload=function()

     {

         var div1= document.getElementsByTagName('div');  //获取每个div

         for(var i=0;i<div1.length;i++)  //当移到哪个div，哪个div发生变化

         {

             div1[i].timer=null;     //首先将定时器清空以免发生其他问题

             div1[i].onmouseover=function()

             {

                 startMove(this,400);

             };

             div1[i].onmouseout=function()

             {

                  startMove(this,100);

             };

         }

     };

     function startMove(obj,iTarget)

     {

        clearInterval(obj.timer);

        obj.timer=setInterval(

         function()

         {

             var speed=(iTarget-obj.offsetWidth)/5;  // 定义速度

             speed=speed>0?Math.ceil(speed):Math.floor(speed);  //速度去上限的限

             if (obj.offsetWidth==iTarget)    //如果宽度已经增加到需要的宽度。停止计时器

             {

                 clearInterval(obj.timer);

             }

             else         //不断增加宽度直到到iTarget的值

             {

                 obj.style.width=obj.offsetWidth+speed+'px';

             }

         }

         , 30)

     }

 </script>

感觉不难，重点进入函数都得清理一下定时器

js实现基础运动的更多相关文章

  1. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

  2. node&period;js学习（二）--Node&period;js控制台（REPL）&amp&semi;&amp&semi;Node&period;js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  3. Node&period;js系列基础学习----安装，实现Hello World&comma; REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  4. css&plus;js&plus;html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  5. JavaScript基础精华02&lpar;函数声明，arguments对象，匿名函数，JS面向对象基础&rpar;

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  6. JavaScript--我发现，原来你是这样的JS（基础概念--灵魂篇，一起来学js吧）

    介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容,当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂 ...

  7. js复习--基础

    最近工作遇到了一些小困难,基础真的很重要,漫天高楼起于地. 一,script元素 包括type=“text/Javascript”,defer延迟到html加载完解析,src=“../../test. ...

  8. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  9. JS零基础一步一步做应用全记录

    1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握 ...

随机推荐

  1. linq和EF查询的用法和区分

    我们做项目时,难免会遇到用的不知道是啥,及把linq和EF搞混了 今天我带领大家梳理下思路: 首先说linq查询,然后介绍EF查询 1.linq查询 当我们使用linq查询时,转到定义会调到Query ...

  2. Java框架基础——反射&lpar;reflect&rpar;

    一.Class类的使用 1)在面向对象(oop)的世界里,万事万物皆对象. 在Java中,包括基本的数据类型,都是对象. Class c = int.class;//int 的类类型 那就是说: 类是 ...

  3. 这是我用Microsoft Word 2010 直接发布的测试用博客

    目的:如题所示.   那么先试试拷贝一段网页内容,发布后观察各种格式的显示效果如何. 下面的文字来自中国网新闻,地址是http://news.china.com.cn/2015-10/23/conte ...

  4. Robot Framework&colon; 自定义自己的python库

    利用Robot Framework编写测试用例,往往需要开发自己的关键字,有的关键字需要通过自己编写python代码来实现.这在rf中,就需要自己定义python库.这个过程其实不复杂,本文来介绍下. ...

  5. 剑指offer（8）跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 题目分析 题目很简单,稍微分析就知道这是斐波那契数列,所以可以动态规划来做 a.如果两种跳法,1阶 ...

  6. 周刷题第一期总结&lpar;two sum and two numbers&rpar;

    由于深深的知道自己是事件驱动型的人,一直想补强自己的薄弱环节算法,却完全不知道从哪里入手.所以只能采用最笨的办法,刷题.从刷题中遇到问题就解决问题,最后可能多多少少也能提高一下自己的渣算法吧. 暂时的 ...

  7. 【随笔】Android应用市场搜索优化（ASO）

    参考了几篇网上的关于Android应用市场搜索优化(ASO)的分析,总结几点如下: 优化关键字:举例目前美团酒店在各Android市场上的关键字有“美团酒店.钟点房.团购.7天”等等,而酒店类竞对在“ ...

  8. strtr与str&lowbar;replace的区别

    strtr与str_replace的区别 2013-03-12 10:58:09|  分类: php函数对比 |字号 订阅 strtr跟被替换的字符(from)和替换的字(to)有关系.只是替换fro ...

  9. jenkins自定义安装目录

    jenkins默认会安装到jvm环境变量的user.dir目录下,这样在系统重新安装后容易丢失. 将以下文件保存为start.bat放到jekins.jar同一目录,执行start.bat即可将jek ...

  10. QuickBI助你成为分析师-数据建模（二）

    摘要: 数据集编辑功能界面介绍以及常见问题总结. 在数据集编辑界面可以进行数据建模来更好的展示数据,创建数据集默认将数值类型字段作为度量,日期.字符串等类型作为维度,度量可以根据维度分组展示.下面来介 ...

相关文章