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

首先是样式和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.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

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

  3. Node.js系列基础学习----安装，实现Hello World, REPL

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

  4. css+js+html基础知识总结

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

  5. JavaScript基础精华02(函数声明，arguments对象，匿名函数，JS面向对象基础)

    函数声明 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. 黑马程序员——OC语言 其他语法

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)ARC的判断准则:只要没有强指针指向对象,就会释放对象 1.ARC特 ...

  2. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

  3. Python print格式化输出

    python中的print格式化输出,基本格式:"[字符串]%格式1[字符串]%格式2[字符串]....."%(string1,string2.....) 格式符号 ------- ...

  4. 二分查找C++

    #include <iostream> using namespace std; //二分查找:每次都从中间位置寻找,如果找到了就返回,如果没找到, //则分两种情况: //(1)中间元素 ...

  5. 团队开发——冲刺2.a

    冲刺阶段二(第一天) 1.今天准备做什么? 收集游戏图片:开始.暂停.继续.重新开始.退出……为了界面的后期美工做准备. 2.遇到什么困难? 网上的图片很多,但是比较难找到统一风格的.

  6. Python 基礎 - 變量

    變量 變量主要是用來存東西,是存在內存裡 Python 變量寫法: name = "Nobody One" Shell Script 變量寫法: name="Nobody ...

  7. 如何在 Linux 终端中知道你的公有 IP

    导读 在本文中我将会介绍在几种在 Linux 终端中查看你的公有 IP 地址的方法.这对普通用户来说并无意义,但 Linux 服务器(无GUI或者作为只能使用基本工具的用户登录时)会很有用.无论如何, ...

  8. opencv配置（2.49）

    转载自浅墨大神http://blog.csdn.net/poem_qianmo/article/details/19809337 OpenCV2.4.9和2.4.8的配置几乎一样,唯一的区别在下文中的 ...

  9. colorPrimaryDark无法改变状态栏颜色

    设置完colorPrimaryDark后,这个颜色是改变状态栏的颜色的, colorPrimary是改变标题栏背景色的 发现状态栏一直是灰色. 然后在布局文件中 AndroidMainifest.xm ...

  10. 解决Hibernate向MySQL数据库插入中文乱码问题

    有时候我们在用hibernate插入中文的字符会出现乱码情况,如下图所示. 看到这种情况,第一反应便是应用程序用的字符集合数据库用的字符集不统一了.我的数据库用个是mysql的,看一下建表语句.用的是 ...