This article mainly introduced JS from the bottom upward rising bubble effect, examples of javascript operation of mouse events, pictures and styles related skills, the need for friends can refer to the
The example of this article tells the JS from the bottom upward rising bubble effect method. Share to everyone for your reference. The implementation methods are as follows:
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 | <html> <head> <title>js realize the rapid rise of bubbles from water </title> <style type= "Text/css" > body {cursor: crosshair;margin:0; padding:0; Position:absolute; Overflow:hidden; Background: #FFF; left:0; top:0; width:100%; height:100%; } </style> <script type= "Text/javascript" > var object = new Array (); NBFM = 60; var xm = 0; var ym = 9999; var nx = 0; var ny = 0; function Movbulb () {with () {if (EC <) {if (Math.Abs (X0-XM) < && math.abs (Y0-YM) <) {XX = (xm-x0)/8; yy = (ym-y0)/8; ec++; } xx *= 0.99; yy *= 0.99; x0 = Math.Round (x0 + math.cos (Y0/15) * p) + xx; y0+= yy-v; if (y0 < h * 2 | | x0 < w * 2 | | x0 > NX + W * 2) {y0 = ny + N + H * 2; x0 = nx/2-100 + math.random () *; EC = 0; } obj.style.top = Y0-h; Obj.style.left = x0-w; } function CObj (n,img,w,h) {this.obj = document.createelement ("img"); this.obj.src = IMG.SRC = "Absolute"; This.obj.style.left =-1000; Document.body.appendChILD (This.obj); This. n = n; this.x0 = 0; This.y0 =-1000; THIS.V = 1 + math.round ((80/h) * Math.random ()); THIS.P = 1 + math.round ((W/8) * Math.random ()); this.xx = 0; this.yy = 0; this.ec = 0; THIS.W = W; This.h = h; This.movbulb = movbulb; function Resize () {nx = document.body.offsetWidth; ny = document.body.offsetHeight;} onresize = resize; Document.onmousemove = function (e) {if (window.event) e = window.event; xm = document.body.scrollleft+ (e.x | | e.clientx); YM = document.body.scrolltop+ (e.y | | e.clienty); function run () {for (i) object[i].movbulb (); settimeout (run);} onload = function () {PIC = Document.getelem Entbyid ("Bubbles"). getElementsByTagName ("img"); Resize (); for (nbf=0;nbf<nbfm;nbf++) {SF = Pic[nbf%pic.length]; OBJECT[NBF] = new CObj (NBF,SF,SF.WIDTH/2,SF.HEIGHT/2);} run (); } </script> </head> <body> <div id= "Bubbles" style= "Visibility:hidden" > <img src= "smile.gif "> <img src=" biggrin.gif "> <img src=" eek.gif "> <img src= "Rolleyes.gif" > </div> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
