前端ABC<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 跳动效果