jquery實現飛舞的小蟲子
阿新 • • 發佈：2018-12-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html, body {
width: 100%;
height: 100%;
background: url(images/dark.jpeg) no-repeat center;
background-size: cover;
overflow: hidden;
position: relative;
}
img {
position: absolute;
width: 38px;
height: 38px;
/*left:100px;
top:100px;*/
}
</style>
<body>
<script src="../../webVendors/vendors/jquery/jquery-1.9.1.min.js"></script>
<script>
function createFirefly() {
var firefly = new Object();
firefly.element = $("<img src = 'images/four.png'/>");
firefly.show = function () {
this.element.css({
"top": this.showPoint().pointY,
"left": this.showPoint().pointX
});
$("body").append(this.element);
};
firefly.showPoint = function () {
var pointY = Math.abs(Math.random() * window.innerHeight - 18) + "px",
pointX = Math.abs(Math.random() * window.innerWidth - 18) + "px";
return {
"pointY": pointY,
"pointX": pointX
}
};
firefly.flyTime = function () {
var flyTime = Math.floor((Math.random() * 3 + 2) * 1000);
return flyTime;
};
firefly.run = function () {
var self = this;
console.log(self);
// self.element.animate({
// left: self.showPoint().pointX,
// top: self.showPoint().pointY,
// }, self.flyTime(),call);
// this.element.animate({
// left: this.showPoint().pointX,
// top: this.showPoint().pointY,
// }, this.flyTime(), function () {
// self.element.animate({
// left: self.showPoint().pointX,
// top: self.showPoint().pointY,
// }, self.flyTime(), arguments.callee);
// });
var animateMove= self.element.animate({
left: self.showPoint().pointX,
top: self.showPoint().pointY,
}, self.flyTime(),function () {
self.run();
});
};
return firefly
}
for (var i = 0; i < 20; i++) {
var fire1 = createFirefly();
fire1.show();
fire1.run();
}
function show(n) {
var arr = [];
console.log('1');
return (function fn() {
arr.unshift(n);
n--;
console.log(arr);
if (n != 0) {
fn();
}
return arr;
})()
}
console.log(show(5));
// /*********************************************************************************************************/
//
// //面向物件，模擬java
// function Firefly() {
// this.element = $("<img src = 'img/1.jpg'/>");
// this.setPointX = function (value) {
// this.pointX = value;
// };
// this.getPointX = function () {
// return this.pointX;
// };
// this.setPointY = function (value) {
// this.pointY = value;
// };
// this.getPointY = function () {
// return this.pointY;
// };
// this.setRunTime = function (value) {
// this.runtime = value;
// };
// this.getRunTime = function () {
// return this.runtime;
// }
// }
//
// Firefly.prototype.show = function () {
// this.setPointX(Math.abs(Math.random() * window.innerWidth - 18) + "px");
// this.setPointY(Math.abs(Math.random() * window.innerHeight - 18) + "px");
// this.element.css({
// left: this.getPointX(),
// top: this.getPointY()
// });
// $("body").append(this.element);
// };
// Firefly.prototype.run = function () {
// //alert(this.flyTime())
// var self = this;
// this.element.animate({
// left: this.getPointX(this.setPointX(Math.abs(Math.random() * window.innerWidth - 18) + "px")),
// top: this.getPointY(this.setPointY(Math.abs(Math.random() * window.innerHeight - 18) + "px"))
// }, this.getRunTime(this.setRunTime(Math.floor((Math.random() * 3 + 2) * 1000))), function () {
// self.element.animate({
// left: self.getPointX(self.setPointX(Math.abs(Math.random() * window.innerWidth - 18) + "px")),
// top: self.getPointY(self.setPointY(Math.abs(Math.random() * window.innerHeight - 18) + "px"))
// }, self.getRunTime(self.setRunTime(Math.floor((Math.random() * 3 + 2) * 1000))), arguments.callee);
// });
// };
// for (var i = 0; i < 20; i++) {
// var fire1 = new Firefly();
// fire1.show();
// fire1.run();
// }
</script>
</body>
</html>