首先我们从页面的设置开始
这样我们就对我们要设计的碰撞效果搭好了框架,下一步是CSS样式的修饰.
经过上面的CSS样式修饰之后我们就可以得到如下图所示的效果:
下一步就是为当前的页面添加JS的动画效果了.
下面是横向偏移的JS相关代码:
添加以上代码之后红色小球将在黑色的边框上面左右来回横向移动:
贴图没有传上来
下面放上Y方向的偏移代码
将X,Y方向上的函数写好以后我们就要添加定时器对两个函数进行调用,这样我们就能够得到红色的小圆球在页面上不断碰撞的效果了.
下面试函数的调用的相关代码:
setInterval(function() {
//对x偏移函数的调用
xmove();
//对x偏移函数的调用
//ymove();
}, 100)本次小动画的完整代码如下,可以尝试一下哦!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01碰撞效果</title>
<style type="text/css">
/*淸样式*/
* {
margin: 0;
padding: 0;
}
/*外面黑色边框的样式设置*/
#wrap {
width: 500px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
/*红色圆球的CSS设置*/
#circle {
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<!--外部黑色的边框-->
<div id="wrap">
<!--内部红色的圆球-->
<div id="circle"></div>
</div>
</body>
<script type="text/javascript">
//获取红色圆球
var circle = document.getElementById("circle");
//X的偏移量
var xpianyi = 0;
//设置布尔型变量
var iszhengxiang = false;
//设置水平方向的移动
function xmove() {
if (iszhengxiang == false) {
//X每次偏移的值
xpianyi += 10;
//添加条件判断,如果大于470px将正向偏移状态打破
if (xpianyi >= 470) {
iszhengxiang = true;
}
} else {
//反方向的运动每次的增量
xpianyi -= 10;
//添加条件判断,如果小于等于0将反向偏移状态打破
if (xpianyi <= 0) {
iszhengxiang = false;
}
}
circle.style.left = xpianyi + "px";
}
//y的偏移量
var ypianyi = 0;
//定义布尔型变量
var iszheng = false;
//定义Y方向上的偏移函数
function ymove() {
if (iszheng == false) {
ypianyi += 10;
//条件的判断
if (ypianyi >= 270) {
iszheng = true;
}
} else {
ypianyi -= 10;
if (ypianyi <= 0) {
iszheng = false;
}
}
//每次将定位值进行改变
circle.style.top = ypianyi + "px";
}
//设置定时器
setInterval(function() {
//对x偏移函数的调用
xmove();
//对x偏移函数的调用
// ymove();
}, 100)
</script>
</html>