这个是通过一个for循环控制的三个li标签，被鼠标触发则会有一个宽度增加和减少的事件

html和css同样写在一起方便察看，这里就是简单的布局，重点在js

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

             font-size: 12px;

         }

         div {

             margin: 10px;

             height: 360px;

             width: 200px;

         }

         ul {

             list-style: none;

         }

         ul li {

             width: 200px;

             height: 100px;

             background: blue;

             margin-bottom: 20px;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div>

         <ul id="ali">

             <li></li>

             <li></li>

             <li></li>

         </ul>

     </div>

 </body>

 </html>

js部分就是通过for循环给每个li都绑定事件，同时为了避免冲突，每个li都需要一个单独的定时器

<script type="text/javascript">

        function $(id) {

            return typeof id === "string" ? document.getElementById(id) : id;

        }

        window.onload = function() {

            //自定义变量aLi为li标签的集合

            var aLi = $("ali").getElementsByTagName("li");

            //自定义变量

            var speed = 0;

            //通过for循环触发三个鼠标移动事件

            for (var i = 0; i < aLi.length; i++) {

                //为每个li都设置一个定时器，防止冲突

                aLi[i].timer = null;

                //鼠标移动进入，绑定事件

                aLi[i].onmouseenter = function() {

                        //调用自定义函数，并传参

                        start(this, 400);

                    }

                    //鼠标移动离开，绑定事件

                aLi[i].onmouseleave = function() {

                    //调用同一个自定义函数，并传参

                    start(this, 200);

                }

            }

            //自定义函数，自定义参数

            function start(one, two) {

                //清楚定时器，因为一个li只有一个定时器能执行

                clearInterval(one.timer);

                //one对应上面aLi[i]，所以one.timer就是aLi[i].timer

                one.timer = setInterval(function() {

                    //speed通过(two-one.offsetWidth)也就是(400-200)

                    //console.log(speed);

                    speed = (two - one.offsetWidth) / 10;

                    //判断是增加width还是减少

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (one.offsetWidth == two) {

                        //当为400或者200时候，清除定时器

                        clearInterval(one.timer);

                    } else {

                        //通过speed自增减

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

                    }

                }, 30);

            }

        }

    </script>

javascript动画效果之多物体缓冲运动的更多相关文章

  1. javascript动画效果之多物体透明度

    html和css 仅为布局,需要注意的是filter对应的是老版本的ie浏览器透明度,而opacity对应的其他浏览器的透明度 filter: alpha(opacity: 50); opacity: ...

  2. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  3. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  4. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  5. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  6. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  7. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  9. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

随机推荐

  1. .a与.framework的区别

    库是共享程序代码的方式,一般分为静态库和动态库. 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. iOS中静态库形式: .a和.framework 动态库:链接时不复制,程序运行 ...

  2. HTML中判断手机是否安装某APP，跳转或下载该应用

    有些时候在做前端输出的时候,需要和app的做些对接工作.就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用.如果安装了该应用,就直接打开该应用:如果没有安装该应用,就下载该应用.那么下面就 ...

  3. [译][待续]Chap1.Using neural nets to recognize handwritten digits

    Chapter1 使用神经网络辨识手写数字 人类的视觉系统是自然界的一大奇迹.试看如下的手写数列: 绝大多数人都能毫不费劲地认出这些数字是504192,而这会让人产生识别数字非常简单的错觉.人类大脑的 ...

  4. php 设置白名单ip

    //检查白名单ip private function _checkAllowIp() { $allowIp = ['203.195.156.12']; $ip = $this->getIp(); ...

  5. OpenCV程序在Debug时出现「PDB文件无法加载」的一个解决方法

    这几天毕设要用到OpenCV,按照网上的教程来搭建开发环境. 用的是OpenCV 3.0 beta + Visual Studio Community 2013.我的系统64位是Win 8.1,但在加 ...

  6. 【转载】javadoc学习笔记和可能的注意细节

    转载自:http://www.cnblogs.com/xt0810/p/3630996.html [前面的话] 这次开发项目使用jenkins做持续集成,PMD检查代码,Junit做单元测试,还会自动 ...

  7. wxpython 安装教程

    wxpython在windows 上的安装,需要在wxpython官网上下载对应的版本:Python分为32和64位系统不是系统的32位和64位 所以可以先在IDE 下输入Python看下当前是32还 ...

  8. sublime修改代码字体颜色

    1.首先知道你采用的是什么颜色主题在Preferences => color scheme查看,假设是Monokai2.查找该主题的脚本文件Preferences => Browse Pa ...

  9. Jedis操作redis（转）

    package org.jzkangta.jedis; import java.util.ArrayList; import java.util.HashMap; import java.util.I ...

  10. C# 委托的应用1：将方法作为参数传递给另一个方法[转]

    原文:http://blog.csdn.net/susan19890313/article/details/6775461 长期以来,c和c++的程序员利用方法指针,将方法作为参数传给另一个方法.c# ...