javascript 跳动效果

<html>
<head>
<title>跳动效果</title>
<style type="text/css">
*{margin:0;padding:0;}
h2{position:absolute;height:50px;background-color:orange;margin-top:400px;width:100%;line-height:50px;text-align:center;}
#cont{width:100px;height:100px;background-color:#66CDAA;position:absolute;cursor:move;}
</style>
</head>
<body>
<h2>请将方块向上拖动</h2>
<div id="cont"></div>

<script type="text/javascript">
var div_cont=document.getElementById('cont');
div_cont.style.left=Math.random()*500+100;
div_cont.style.top=300;
var a=0,speed=0;
var timer=null;
function move1()     //下降运动函数
{
	a+=(speed/30);   //把速度除以一个系数,减慢速度
	speed+=2;
	div_cont.style.top=a;
	if(a>=300)    //判断是否落地
	{
		clearInterval(timer);
		timer=setInterval(function(){ //反弹上升运动函数
			a-=(speed/30);
			speed-=3;  //速度的递减一定要比递增快,这样就不会反弹至原点,而是反弹至比原点低的位置
			div_cont.style.top=a;
			if(speed<=0)   //判断速度是否到0,即到达上升的最高点
			{
				if(a>=295)
				{
					div_cont.style.top=300;
					clearInterval(timer);
					return false;
				}
				move();
			}
		},8)
	}
}
function move()
{
clearInterval(timer);
timer=setInterval("move1()",8);
}

var newL=0,newT=0;
div_cont.onmousedown=function(event)
{
	var e = event || window.event;
	newL=e.clientX-parseInt(div_cont.style.left);
	newT=e.clientY-parseInt(div_cont.style.top);
	div_cont.onmousemove=function(event)
	{
		go(event);
	}
}
function go(event)
{
	var e = event || window.event;
	div_cont.style.left=e.clientX-newL;
	div_cont.style.top=e.clientY-newT;
}
div_cont.onmouseup=function()
{
	a=parseInt(div_cont.style.top);
	div_cont.onmousemove=null;
	move();
}



</script>

</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » javascript 跳动效果

赞 (1)
分享到:更多 ()

发表评论 0