先给自己埋个坑 写的思路和更多注释等有时间了再补
先贴上代码,效果图~~
滑天下之稽~之滑稽撞壁返回
目前还是自己设定区域,没做到随浏览器大小自动调整范围
感觉重复代码过多,主要还是数组用的不好呢 = =
图片用自己喜欢的就可以了
如果是转载记得注明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>斜眼笑OyxXxx</title>
<style type="text/css">
/*设置盒子大小以及图片大小*/
#area {
position:relative;
width: 1000px;
height: 800px;
margin: 0px auto;
border:5px #000 solid;
}
/*5个斜眼笑的尺寸以及边缘*/
#smile {
width:145px; height:145px; border-radius:50%; overflow:hidden;
position:absolute;
}
#smile2 {
width:145px; height:145px; border-radius:50%; overflow:hidden;
position:absolute;
}
#smile3 {
width:145px; height:145px; border-radius:50%; overflow:hidden;
position:absolute;
}
#smile4 {
width:145px; height:145px; border-radius:50%; overflow:hidden;
position:absolute;
}
#smile5 {
width:145px; height:145px; border-radius:50%; overflow:hidden;
position:absolute;
}
</style>
</head>
<body>
<!--引入图片-->
<div id="area">
<div id="smile"><img src="img/斜眼笑.JPG "></div>
<div id = "smile2"><img src="img/斜眼笑.jpg"></div>
<div id = "smile3"><img src="img/斜眼笑.jpg"></div>
<div id = "smile4"><img src="img/斜眼笑.jpg"></div>
<div id = "smile5"><img src="img/斜眼笑.jpg"></div>
</div>
<!--JS代码开始!-->
<script type="text/javascript">
/*将smile从CSS带进JavaScript*/
function rebound() {
var area = document.getElementById("area");
var smile = document.getElementById("smile");
var smile2 = document.getElementById("smile2");
var smile3 = document.getElementById("smile3");
var smile4 = document.getElementById("smile4");
var smile5 = document.getElementById("smile5");
/*设置边缘距离 即:总长度 - 图片本身长度
总高度 - 图片本身高度*/
var maxWidth = area.clientWidth - smile.offsetWidth;
var maxWidth2 = area.clientWidth - smile2.offsetWidth;
var maxWidth3 = area.clientWidth - smile3.offsetWidth;
var maxWidth4 = area.clientWidth - smile3.offsetWidth;
var maxWidth5 = area.clientWidth - smile3.offsetWidth;
var maxHeight = area.clientHeight - smile.offsetHeight;
var maxHeight2 = area.clientHeight - smile2.offsetHeight;
var maxHeight3 = area.clientHeight - smile3.offsetHeight;
var maxHeight4 = area.clientHeight - smile3.offsetHeight;
var maxHeight5 = area.clientHeight - smile3.offsetHeight;
/*获取对象相对于由offsetParent属性指定的父坐标距离顶端的距离 */
var top = smile.offsetTop,
left = smile.offsetLeft;
var top2 = smile2.offsetTop,
left2 = smile2.offsetLeft;
var top3 = smile3.offsetTop,
left3 = smile3.offsetLeft;
var top4 = smile4.offsetTop,
left4 = smile4.offsetLeft;
var top5 = smile5.offsetTop,
left5 = smile5.offsetLeft;
/*设置X,Y轴的速度*/
var speedY = 5,
speedX = 3;
var speedY2 = 7,
speedX2 = 5;
var speedY3 = 9,
speedX3 = 7;
var speedY4 = 11,
speedX4 = 9;
var speedY5 = 13,
speedX5 = 11;
/*移动函数 判断Top和Left的值,当其大于最大边界值时,反向,调用Style中Type改变位置
*/
function move() {
top += speedY;
left += speedX;
if (top >= maxHeight) {
speedY *= -1;
}else if (top <= 0) {
speedY *= -1;
}
if (left >= maxWidth) {
speedX *= -1;
}else if (left <= 0) {
speedX *= -1;
}
smile.style.left = left +"px";
smile.style.top = top +"px";
}
function move2() {
top2 += speedY2;
left2 += speedX2;
if (top2 >= maxHeight2) {
speedY2 *= -1;
}else if (top2 <= 0) {
speedY2 *= -1;
}
if (left2 >= maxWidth2) {
speedX2 *= -1;
}else if (left2 <= 0) {
speedX2 *= -1;
}
smile2.style.left= left2 +"px";
smile2.style.top = top2 +"px";
}
function move3() {
top3 += speedY3;
left3 += speedX3;
if (top3 >= maxHeight3) {
speedY3 *= -1;
}else if (top3 <= 0) {
speedY3 *= -1;
}
if (left3 >= maxWidth3) {
speedX3 *= -1;
}else if (left3 <= 0) {
speedX3 *= -1;
}
smile3.style.left = left3 +"px";
smile3.style.top = top3 +"px";
}
function move4() {
top4 += speedY4;
left4 += speedX4;
if (top4 >= maxHeight4) {
speedY4 *= -1;
}else if (top4 <= 0) {
speedY4 *= -1;
}
if (left4 >= maxWidth4) {
speedX4 *= -1;
}else if (left4 <= 0) {
speedX4 *= -1;
}
smile4.style.left = left4 +"px";
smile4.style.top = top4 +"px";
}
function move5() {
top5 += speedY5;
left5 += speedX5;
if (top5 >= maxHeight5) {
speedY5 *= -1;
}else if (top5 <= 0) {
speedY5 *= -1;
}
if (left5 >= maxWidth5) {
speedX5 *= -1;
}else if (left5 <= 0) {
speedX5 *= -1;
}
smile5.style.left = left5 +"px";
smile5.style.top = top5 +"px";
}
function autoPlay(){
setInterval(move, 10);
setInterval(move2,10);
setInterval(move3,10);
setInterval(move4,10);
setInterval(move5,10);
}
autoPlay();
}
rebound();
</script>
</body>
</html>