(39)JS运动之缓冲运动

基本思路:使用定时器让物体向右运动,在运动的过程中再不是匀速运动,而是先快后慢,即距离越大,速度越快,距离越小,速度越小,可是到达终点的时候,必须注意要使用向上取整函数Math.ceil()和向下取整函数Math.floor();这样才可以正确无误地到达终点,而不是有出入。

<!DOCTYPE HTML>
<!--

-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
	width:100px;
	height:100px;
	background:red;
	position:absolute;
	left:0px;//left:600px;
	top:50px;
}
#div2{
	width:1px;
	height:300px;
	background:red;
	position:absolute;
	left:300px;
	top:0px;
	background:black;

}

</style>

<script>

function startMove(){

	var oDiv=document.getElementById('div1');
	setInterval(function(){

		var speed=(300-oDiv.offsetLeft)/10;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);//向上取整
		oDiv.style.left=oDiv.offsetLeft+speed+'px';
		document.title=oDiv.offsetLeft+','+speed;

	},30);
}

</script>
</head>
<body>
   <input type="button" value="開始运动" onclick="startMove()"/>
   <div id="div1"></div>
   <div id="div2">/<div>

</body>
</html>

效果图:

初始状态,分别从左出发和从右出发:

没取整导致有出入的情况,title表示终点位置和速度大小:

取整没误差情况:

时间: 2024-08-10 00:07:15

(39)JS运动之缓冲运动的相关文章

js之运动框架缓冲运动

由于JS里对于数值小数点会自动去除,所以对于运动位置,需要使用Math.ceil()向上取整或者 Math.floor()向下取整进行解决 以下是我的缓冲运动练习简单代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

JS运动基础(二) 摩擦运动、缓冲运动

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流

js缓冲运动代码实例

js缓冲运动代码实例:元素的缓冲运动效果要比匀速运动更为美观一些,因为显得更为有张力和弹性,当然对于浏览者来说可能会有更好的效果,那么留住用户的可能性也就更大,下面就通过代码实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

JS实现多物体width缓冲运动实例

多物体运动,运动参数不能公用. 这篇文章主要介绍了JS实现多物体缓冲运动实例代码,有需要的朋友可以参考一下 效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 代码如下: <head runat="server"> <title></title> <style type="text/css">

js运动基础之缓冲运动

单属性缓冲运动 1 /** 2 * 单属性缓冲运动 3 */ 4 function fnSingleBufferMove(oDom, sAttr, iTarget, fn){ 5 var iSpeed, iCur; 6 clearInterval(oDom.timer); 7 oDom.timer = setInterval(function(){ 8 // 计算当前值 9 if(sAttr == 'opacity'){ 10 iCur = Math.round(fnGetStyle(oDom,

js实现缓冲运动,和匀速运动有点不相同

缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. 1 <style> 2 *{ 3 padding:0; 4 margin:10px 0; 5 } 6 #div1{ 7 height:100px; 8 width:100px; 9 background:green; 10 float:left; 11 position:relative; 12 left:1000px; 13 } 14 #div2{ 15 border-left:1px solid black; 16 pos

JS运动---运动基础(缓冲运动)

(1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数值并没有四舍五入计算,200.9px最后依然是200px 速度不能是小数,需要取整,所以接下来进行取整 因为从左到右运动和从右到左运动不一样,所以需要判断 (3)右侧悬浮框缓冲运动 <!DOCTYPE HTML> <html> <head> <meta charset

关于javascript缓冲运动的笔记

Js里面有关运动的框架比较多,先从基本开始,我感觉缓冲运动是比教基础而且比较重要的,先提供一个小例子. <script type="text/javascript">        window.onload = function()        {            var oBtn = document.getElementById("btn1");            var oDiv = document.getElementById(&

缓冲运动以及方法的封装

缓冲运动:速度由快到慢的一种运动形式,常见于轮播图:现封装一个小插件,方便实现不同元素,实现不同样式的缓冲变化: 1 //获取非行间样式 2 function getStyle(ele,attr){ 3 return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr]; 4 } 5 6 function move(ele,json,fn){ //json的接收 {width:10900} 7 /