Js实现小球运动特效
摘要：Js实现小球运动特效
html代码
运行代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body style="background:pink;">
<div id="ball" style="position:absolute;" onmouseover="stop()" onmouseout="jixu()">
<img src="http://img03.taobaocdn.com/imgextra/i3/475787171/TB2fGvsdpXXXXbDXXXXXXXXXXXX-475787171.gif"/>
</div>
<script type="text/javascript">
//定义局部变量
var directX=1;//定义x轴方向
var directY=1;//定义y轴方向
var ballX=0;//定义x轴坐标
var ballY=0;//定义y轴坐标
var speed=10;//定义一个速度
var myball=document.getElementById("ball");
function ballMove(){
ballX=ballX+directX*speed;
ballY=ballY+directY*speed;
//改变div的left,top的值
myball.style.left=ballX+"px";
myball.style.top=ballY+"px";
//判断x轴什么时候转向
if(ballX+myball.offsetWidth>=document.documentElement.clientWidth||ballX<=0){
//clientWidth浏览器不带滚动条的宽度;clientHeight浏览器不带工具栏菜单栏以及滚动条等的高度
directX=-directX;//offsetWidth可以返回一个对象的实际宽度(不带单位)offsetHeight类同
}
//判断y轴何时转向
if(ballY+myball.offsetHeight>=document.documentElement.clientHeight||ballY<=0){
directY=-directY;
}
}
var stopmove=setInterval("ballMove()",50);
function stop(){
clearInterval(stopmove);
}
function jixu(){
var stopmove=setInterval("ballMove()",50); ;
}
</script>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢