图片上下左右飘动（jQuery+JS）
2017-09-22 本文已影响51人
小小蒜头
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img {
position: absolute;
width: 410px;
height: 256px;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
// //5.点击按钮,页面上图片开始飘动,但到屏幕边界时会弹向另一个方向
// window.onload = run;
// var myEvent = window.setInterval("run()", 6);
//
// var x = 0;
// var y = 0;
// var xrun = true;
// var yrun = true;
// var pauseOrStart = true;
//
// function run() {
//
// var left_x = pageXOffset;
// var top_y = pageYOffset;
// var img = document.getElementById("img");
// var right_x = left_x + innerWidth - img.width;
// var bottom_y = top_y + innerHeight - img.height;
// if(yrun) {
// moveBottom();
// } else {
// moveTop();
// }
// if(xrun) {
// moveRight();
// } else {
// moveLeft();
// }
// if(y == bottom_y) {
// yrun = false;
// }
// if(y == top_y) {
// yrun = true;
// }
// if(x == left_x) {
// xrun = true;
// }
// if(x == right_x) {
// xrun = false;
// }
// img.style.left = x + "px";
// img.style.top = y + "px";
// }
//
// function moveRight() {
// x++;
//
// }
//
// function moveLeft() {
// x--;
// }
//
// function moveTop() {
// y--;
// }
//
// function moveBottom() {
// y++;
// }
//
// function change_move() {
// if(pauseOrStart) {
// window.clearInterval(myEvent);
// pauseOrStart = false;
// } else {
// myEvent = window.setInterval("run()", 6);
// pauseOrStart = true;
// }
// }
$(function () {
//img的开始点
var x = 0;
var y = 0;
//距离左边和上边的距离2个像素
var x_left = 2;
var y_top = 2;
//获得窗体的边界
var width = innerWidth;
var height = innerHeight;
var move = false;
function clear() {
if (x > (width - 410) || x < 0) {
x_left = -x_left;
}
if (y > (height - 256) || y < 0) {
y_top = -y_top;
}
x = x + x_left;
y = y + y_top;
var x_px = x + "px";
var y_px = y + "px";
$("#img").css("left", x_px);
$("#img").css("top", y_px);
}
var remove = setInterval(clear, 10);
$("#move").click(function () {
if (move) {
alert("shhsh");
remove = setInterval(clear, 10);
move = true;
} else {
clearInterval(remove);
move = false;
}
});
});
</script>
</head>
<body>
<br/>
<input type="button" id="move" value="暂停" style="width: 60px;background-color: orange;"/>
</body>
</html>
