201509010 javascript事件-多物体运动

问题代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多物体运动</title>
<style>
*{margin:0; padding:0;}
body{ background:#D1D1D1}
ul,li{list-style:none;}
ul li{width:200px;height:100px; background:black; margin-bottom:20px;}
</style>
<script>
window.onload=function(){
    var aLi=document.getElementsByTagName(‘li‘);
    for(var i=0;i<aLi.length;i++){
        aLi[i].onmouseover=function(){
            startMove(this,600);
            }
        aLi[i].onmouseout=function(){
            startMove(this,200);
            }
        }
    }
    //第一步:定义定时器
    var timer=null;
    function startMove(obj,target){
    //第二步:关闭定时器。开定时器首先必须关闭定时器,否则会有叠加效果
        clearInterval(obj.timer);
    //第三步:开定时器。一定要写timer=set(……);
        obj.timer=setInterval(function(){
    //第四步:定义速度。
            var speed=(target-obj.offsetWidth)/10;
    //第五步:取整。缓冲运动一定要取整,否则会有bug
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetWidth==target){
                clearInterval(obj.timer);
            }else{
                obj.style.width=obj.offsetWidth+speed+"px";
                };
            }
        ,30)
        }

</script>
</head>

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

问题现象:

  以上代码执行后,当鼠标快速滑过并离开每个li时,每一个li无法到达和恢复目标宽度。

问题原因:

  所有li都在共享一个定时器,在滑动过程中,范围内的li都在争抢一个定时器,无法达到预期效果。

解决方案:

  给每一个li都绑定一个定时器。

最终代码如下(关键代码用背景红色标注):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多物体运动</title>
<style>
*{margin:0; padding:0;}
body{ background:#D1D1D1}
ul,li{list-style:none;}
ul li{width:200px;height:100px; background:black; margin-bottom:20px;}
</style>
<script>
window.onload=function(){
    var aLi=document.getElementsByTagName(‘li‘);
    for(var i=0;i<aLi.length;i++){
        aLi[i].timer=null;
        aLi[i].onmouseover=function(){
            startMove(this,600);
            }
        aLi[i].onmouseout=function(){
            startMove(this,200);
            }
        }
    }
    //第一步:定义定时器
    //var timer=null;
    function startMove(obj,target){
    //第二步:关闭定时器。开定时器首先必须关闭定时器,否则会有叠加效果
        clearInterval(obj.timer);
    //第三步:开定时器。一定要写timer=set(……);
obj.timer=setInterval(function(){
    //第四步:定义速度。
            var speed=(target-obj.offsetWidth)/10;
    //第五步:取整。缓冲运动一定要取整,否则会有bug
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(obj.offsetWidth==target){
                clearInterval(obj.timer);
            }else{
                obj.style.width=obj.offsetWidth+speed+"px";
                };
            }
        ,30)
        }

</script>
</head>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
时间: 2024-10-10 16:20:49

201509010 javascript事件-多物体运动的相关文章

Javascript 多物体运动——逐行分析代码,让你轻松了运动的原理

我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; height: 50px; background: red; margin: 10px; } </style> <body> <div></div> <div></div> <div></div> </body>

Javascript 多物体运动的实现

这篇文章主要介绍了Javascript 多物体运动的实现,需要的朋友可以参考下 我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. 代码如下: 1 <style type="text/css"> 2 div { 3 width: 100px; 4 height: 50px; 5 background: red; 6 margin: 10px; 7 } 8 </style> 代码如下: 1 <body> 2 <div>&

js动画之多物体运动

多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体运动</title> <style> body{margin: 0px;padding: 0px;} .animation{ background-color: green; marg

多物体运动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=

JS定时器做物体运动

JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么?定时器的原理是什么? 我的理解为,定时器是能让一个物体根据规定的时间做规定的移动,而物体运动是怎样的效果呢?你可以理解为一个人走路,要走到某个位置,要走到这个位置肯定是一步步移动才能达到,而不是瞬间就到达的,所以定时器的作用更像是让物体像人一样走到相应的位置 比如: 规定一个横形状方块,其中包裹一个

javascript事件委托机制详解

以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度. 面试官可能问一下问题,现在有5个li待办事件,需要实现当点击一个li时实现弹出该li的信息 <ul class="top"> <li>橘子</li> <li>香蕉</li> <li>苹果</li> <li>梨子</li> <li>

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

JavaScript事件机制

<script type="text/javascript" src="http://runjs.cn/gist/2zmltkfa/all"></script> [前端培养-作业01]javascript事件机制 1.javascript事件模型 2.e.target与e.currentTarget是干什么的? 3.preventDefault与stopPropagation是干什么的 4.什么是dispatchEvent? 5.说一说事件代

javascript事件委托练习

JavaScript事件代理是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就不需要为每一个元素添加或者删除事件处理器,从而避免了内存泄露或者是遍历节点造成的性能下降. 如果整个页面都采用同样事件流方式,当红色蓝色区域触发相同事件,冒泡法:先处理蓝色区域请求,捕获法:先处理红色区域请求 如果不同层的元素使用的useCapture不同,会先从最外层元素往目标元素寻找设定为capture(捕获)模式的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling(