相思湖学院 15级JS课程

2017-11-22 18:20
请先登录。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } body { width: 100%; height: 2500px; background: url(images/bg.jpg) top left no-repeat; background-size: cover; position: relative; cursor: pointer; } img { position: absolute; } </style> </head> <body> </body> <script> function Star(src,x,y,width){ this.src = src; this.x = x; this.y = y; this.width = width; this.image = function(){ var img = new Image(); img.src = this.src; img.style.width = this.width + "px"; img.style.height = this.width + "px"; img.style.left = this.x + "px"; img.style.top = this.y + "px"; img.style.opacity = 1; document.body.appendChild(img); }; }; var arr = [ "images/subball1.png", "images/subball2.png", "images/subball3.png", "images/subball4.png", "images/subball5.png", "images/subball6.png", "images/subball7.png", "images/subball8.png" ]; document.body.onclick = function (event){ var src = arr[Math.floor(Math.random() * arr.length)]; var x = event.clientX - 5; var y = event.clientY + 5; var sign =(Math.random()<1)?0:1; var width = 100 + sign*50; var Image = new Star(src,x,y,width); Image.image(); }; </script> </html>