Js implements simple ball movement effects
- 2020-12-22 17:34:54
- OfStack
Without further ado, I will post js code directly to you. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-"/>
</head>
<body style="background:pink;">
<div id="ball" style="position:absolute;" onmouseover="stop()" onmouseout="jixu()">
<img src="http://img.taobaocdn.com/imgextra/i//TBfGvsdpXXXXbDXXXXXXXXXXXX-.gif"/>
</div>
<script type="text/javascript">
// Define local variables
var directX=;// define x axis
var directY=;// define y axis
var ballX=;// define x Axis coordinates
var ballY=;// define y Axis coordinates
var speed=;// define 1 A speed
var myball=document.getElementById("ball");
function ballMove(){
ballX=ballX+directX*speed;
ballY=ballY+directY*speed;
// change div the left,top The value of the
myball.style.left=ballX+"px";
myball.style.top=ballY+"px";
// judge x When does the shaft turn
if(ballX+myball.offsetWidth>=document.documentElement.clientWidth||ballX<=){
//clientWidth The browser does not have scroll bar width ;clientHeight The browser does not have the height of the toolbar, menu bar, scroll bar, etc
directX=-directX;//offsetWidth Can return 1 The actual width of an object ( Don't take the unit )offsetHeight affinity
}
// judge y When the shaft turns
if(ballY+myball.offsetHeight>=document.documentElement.clientHeight||ballY<=){
directY=-directY;
}
}
var stopmove=setInterval("ballMove()",);
function stop(){
clearInterval(stopmove);
}
function jixu(){
var stopmove=setInterval("ballMove()",); ;
}
</script>
</body>
</html>
The above code is relatively simple, I hope to use Js to achieve a simple ball movement effect to help!