您的位置：首页 > 其它

运动的球(1)

2015-11-28 16:59 281 查看 
<!doctype html>
<html>
<head>
<title>抛物运动</title>
<style>
html{height:100%;}
body{font-family:Arial;height:100%;}
.wrap{width:1200px;margin:0 auto;padding:60px 0;position:relative;height:100%;}
.x{border-top:1px solid #000;position:absolute;left:0;top:400px;right:0;}
.x:before{content:"X";font-size:40px;position:absolute;right:5px;}
.y{border-left:1px solid #000;position:absolute;left:600px;top:0;bottom:0;}
.y:before{content:"Y";font-size:40px;position:absolute;left:5px;}
#target{width:100px;height:40px;border-radius:20px;cursor:move;background:#f0f3f9;border:1px solid #3453d8;position:absolute;top:100px;left:100px;line-height:40px;}
.mid{display:block;text-align:center;}
#roll{width:30px;height:30px;border-radius:50%;position:absolute;top:400px;left:600px;margin-top:-15px;margin-left:-15px;background:#f2c823;}
</style>
</head>
<body>
<div class="wrap">
<i class="x"></i>
<i class="y"></i>
<div id="target"><span class="mid">X:<span id="xt"></span> Y:<span id="yt"></span></span></div>
<div id="roll"></div>
</div>
<script>
target.addEventListener("mousedown",dragstart, false);
var orignX, orignY, startX, startY, targetX, targetY;
xt.innerHTML = target.offsetLeft - 600 + 50;
yt.innerHTML = target.offsetTop - 400 + 20;
function dragstart(e){
orignX = e.clientX;
orignY = e.clientY;
startX = this.offsetLeft;
startY = this.offsetTop;
this.addEventListener("mousemove",drag, false);
this.addEventListener("mouseup",dragend, false);
}
function drag(e){
var x = e.clientX, y = e.clientY, deltaX = e.clientX - orignX, deltaY = e.clientY - orignY;
this.style.left = startX + deltaX + 'px';
this.style.top = startY + deltaY + 'px';
xt.innerHTML = this.offsetLeft - 600 + 50;
yt.innerHTML = this.offsetTop - 400 + 20;
}
function dragend(){
this.removeEventListener("mousemove", drag, false);
this.removeEventListener("mouseup", dragend, false);
targetX = target.offsetLeft - 600 + 50;
targetY = target.offsetTop - 400 + 20;
b = (targetY - a * targetX * targetX) / targetX;
shot();
}
var frame1 = 167, a = 0.003, flag = true, b;
function shot(){
if(!flag) return;
var moveX = 0, rate = targetX > 0 ? 1 : -1;
var step = function(){
var t = 2 * a * moveX + b;
moveX = moveX  + rate * Math.sqrt(frame1 / (t * t + 1));

if(Math.abs(moveX) > Math.abs(targetX)){
moveX = targetX;
}
var x1 = moveX, y1 = a * x1 * x1 + b * x1;
roll.style["transform"] = "translate(" +x1 + "px, "+ y1 +"px"+")";
if(x1 !== targetX){
window.requestAnimationFrame(step);
}else{
var xx = 10;
}
};
window.requestAnimationFrame(step);
}
</script>
</body>
</html>


View Code
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航