黑马程序员技术交流社区

标题: javascript模拟生活中的足球 [打印本页]

作者: java_dream 时间: 2014-8-20 10:33
标题: javascript模拟生活中的足球
<html>
  <head>
<style type="text/css">
   img{margin:0;padding:0;width:0px;height:0px;background:url(1.jpg);
      position:absolute;}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById('img1');
var iSpeedX = 0;
var iSpeedY = 0;
var prevX = 0;
var prevY = 0;

oDiv.onmousedown = function(ev)
{
var oEv = ev || window.event;
var disX = oEv.clientX - oDiv.offsetLeft;
var disY = oEv.clientY - oDiv.offsetTop;
iSpeedX = oEv.clientX - prevX;
iSpeedY = oEv.clientY - prevY;
prevX = oEv.clientX;
prevY = oEv.clientY;

clearInterval(oDiv.timer);
document.onmousemove = function(ev)
{
var oEv = ev || window.event;
      iSpeedX = oEv.clientX - prevX;
      iSpeedY = oEv.clientY - prevY;
      prevX = oEv.clientX;
      prevY = oEv.clientY;

oDiv.style.left = oEv.clientX - disX + 'px';
oDiv.style.top = oEv.clientY - disY + 'px';
}
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
startMove();
}

return false;
}

toChange(210);

function  toChange(iTarget)
{
oDiv.style.left = (document.documentElement.clientWidth-oDiv.clientWidth)/2 + 'px';
oDiv.style.top = (document.documentElement.clientHeight-oDiv.clientHeight)/2 + 'px';
var offsetL = oDiv.offsetLeft;
var offsetT = oDiv.offsetTop;

clearInterval(oDiv.timer);
oDiv.timer = setInterval(function(){
if(oDiv.clientWidth==iTarget)
{
clearInterval(oDiv.timer);
startMove();
}
else
{
      oDiv.style.width = oDiv.offsetWidth + 10 + 'px';
      oDiv.style.height = oDiv.offsetHeight + 10 + 'px';
      oDiv.style.left = offsetL - oDiv.offsetWidth/2 + 'px';
      oDiv.style.top = offsetT - oDiv.offsetHeight/2 + 'px';
}
},30);
}

function startMove()
{
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function(){
iSpeedY += 3;
var L = oDiv.offsetLeft + iSpeedX;
var T = oDiv.offsetTop + iSpeedY;
if(L>=document.documentElement.clientWidth-oDiv.offsetWidth)
{
oDiv.style.left = document.documentElement.clientWidth-oDiv.offsetWidth + 'px';
iSpeedX *= -0.75;
iSpeedY *= 0.75;
}
else if(L<=0)
{
oDiv.style.left = 0 + 'px';
iSpeedX *= -0.75;
iSpeedY *= 0.75;
}
else
{
oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
}

if(T>=document.documentElement.clientHeight-oDiv.offsetHeight)
{
oDiv.style.top = document.documentElement.clientHeight-oDiv.offsetHeight + 'px';
iSpeedX *= 0.75;
iSpeedY *= -0.75;
}
else if(T<=0)
{
oDiv.style.top = 0 + 'px';
iSpeedX *= 0.75;
iSpeedY *= -0.75;
}
else
{
oDiv.style.top = oDiv.offsetTop + iSpeedY + 'px';
}
},30);
}
}
</script>
  </head>
  <body>
<img id="img1" src="1.jpg" />
  </body>
</html>

1.jpg (20.78 KB, 下载次数: 16)

足球

作者: 孙小亚 时间: 2014-8-20 11:31
赞赞赞！！！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2