用jquery写的图片在固定盒子中移动（遇到边界自动翻转）
jquery-3.3.1.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乱蹦的图片</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
body{
margin: 0;
}
.big{
position: relative;
width: 1000px;
height: 500px;
border: 2px solid #000;
margin: 50px auto;
}
.box{
width: 120px;
height: 50px;
background: green;
border-radius: 8px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 12px;
position: absolute;
left: 0;
top: 0;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="big">
<div class="box">乱蹦的图片</div>
</div>
<script>
$(function(){
//在显示时，马上调用fn方法
fn();
//设运动的横坐标步长
var x = 0;
//设运动的纵坐标步长
var y = 0;
//得到运动盒子的宽
var l = $('.box').width();
//得到运动盒子的高
var t = $('.box').height();
//得到大盒子的宽
var bl = $('.big').width();
//得到大盒子的高
var bt = $('.big').height();
//得到大盒子减去运动盒子的横坐标差值
var w = bl - l;
//得到大盒子减去运动盒子的纵坐标差值
var h = bt - t;
//开定时器
setInterval(fn,10);
function fn(){
//从左往右运动
if(parseInt(x/w)%2 == 0){
x2=x%w;
$('.box').css({
left: x2
});
x++;
}
//从右往左运动
else{
x1=x%w;
$('.box').css({
left: w-x1
});
x++;
}
//从上往下运动
if(parseInt(y/h)%2 == 0){
y2=y%h;
$('.box').css({
top: y2
});
y++;
}
//从下往上运动
else{
y1=y%h;
$('.box').css({
top: h-y1
});
y++;
}
}
})
</script>
</body>
</html>