zoukankan      html  css  js  c++  java
  • 缓冲运动

    解决了div框不能够准确到达指定位置的情况,出现这种情况的原因是当到快要到终点时,速度跳过一个单位,超过指定位置,再回来,又小于指定位置,所以不停的在指定位置跳转

    解决方法:当最后的距离小于速度值时,直接将位置变为参数值。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div1{100px; height:150px; position:absolute; background:#0F0; left:500px;
    top:20;}
    #div2{1px; height:300px; left:100px; background:#00F; position:absolute; top:0px;}
    #div3{1px; height:300px; left:300px; background:#00F; position:absolute; top:0px;}
    </style>
    <script>
    window.onload=function()
    {
    	var oDiv=document.getElementById('div1');
    	var oBtn1=document.getElementById('btn1');
    	var oBtn2=document.getElementById('btn2');
    	
    	var speed;
    	oBtn1.onclick=function()
    	{
    		onmove(100);
    	}
    	oBtn2.onclick=function()
    	{
    		onmove(300);
    	}
    	var timer;
    	function onmove(iTarget)//带参数的方法
    	{
    		
    		clearInterval(timer);//关闭所有定时器
    		timer=setInterval(function()//定义定时器
    		{
    			if(oDiv.offsetLeft<iTarget)//如果离左边的位置小于参数,速度为正
    			{
    				speed=7;
    			}
    			else//否则为负
    			{
    				speed=-7;
    			}
    			if(Math.abs(oDiv.offsetLeft-iTarget)<7)//如果距离小于7进行此操作
    			{
    				clearInterval(timer);//关闭定时器
    				oDiv.style.left=iTarget;//让其位置就是参数值
    			}
    			else
    			{
    				oDiv.style.left=oDiv.offsetLeft+speed+'px';//进行匀速运动
    			}
    		},30)
    	}
    }
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="到100" />
    <input id="btn2" type="button" value="到300" />
    <div id="div1">
    
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>
    </body>
    </html>
    
  • 相关阅读:
    卷积神经网络要点解析
    quicksork解析
    梳理知识点(一)
    高斯混合模型以及EM算法
    adaboost/gdbt/xgboos/random forestt的异同点
    Anki使用
    Markdown写作入门
    VBox复制虚拟机镜像后的操作
    Hadoop集群之vsftpd设置
    使用Oracle函数将银行归类,方便引用
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4534764.html
Copyright © 2011-2022 走看看