Phiên bản đầy đủ: jsB@nk » Multimedia » Mưa và sấm chớp
URL: https://www.javascriptbank.com/raining-and-lighting-index.html
Kết hợp giữa hiệu ứng mưa và sử dụng hình ảnh tia sét để tạo nên một hiệu ứng rất sinh động cho site của bạn.
Phiên bản đầy đủ: jsB@nk » Multimedia » Mưa và sấm chớp
URL: https://www.javascriptbank.com/raining-and-lighting-index.html
<style> a:visited {color: #ffffff; text-decoration: none;} a:hover {color: #00ff00; text-decoration: underline;} a:link {color: #ffffff; text-decoration: none;} a:active {color: #ffffff; text-decoration: none;} .drop {position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40; color: blue;} </style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript"> var sym = " ' "; var speed = 35; var angle = 12; var movex = -speed/angle; var movey = speed; var lightning_image = "lightning.gif"; var lightning_width = 128; var lightning_height = 192; var num_drops = to_int(screen.width / 60); var width_indent = 0; var left_indent = screen.height / 10; var top_indent = 0; var doc_left = screen.width * .15; var doc_top = screen.height * .15; var doc_width = screen.width * .7; var doc_height = screen.height * .7; var doc_clientleft = doc_left + width_indent; var doc_clienttop = doc_top + top_indent; var doc_clientwidth = doc_width - (width_indent * 2); var doc_clientheight = doc_height * .925; var moverain_timeout = 25; var movelightning_timeout = 5000; var increment = (doc_clientwidth - left_indent) / num_drops; var rainposx = new Array(); function moverain() { for(move = 0; move < num_drops; move++) { xx[move]+=movex; yy[move]+=mv[move]; if(xx[move] <= doc_clientleft) { yy[move] = 0; xx[move] = rainposx[move]; } if(yy[move]+doc_clienttop >= doc_clienttop+doc_clientheight) { yy[move] = 0; xx[move] = rainposx[move]; } drop[move].left = xx[move]; drop[move].top = yy[move] + doc_clienttop; } setTimeout("moverain()", moverain_timeout); } function resettext() { window.document.searchform.searchvalue.value = 'Search the Web'; window.document.searchform.searchvalue.select(); } function to_int(n) { for(i=0; i<10000; i++) { if(n>i && n<i+1) { n = i; i = 10000; } else if(n == i) { i = 10000; } } return n; }function movelightning(){ var minleft = doc_clientleft; var maxleft = doc_clientleft + doc_clientwidth - lightning_width; var totalwidth = maxleft - minleft; document.all["lightning"].style.left = Math.random() * totalwidth + minleft; setTimeout("movelightning()", movelightning_timeout);} </script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY BACKGROUND="Ocean_Wave.jpg" BGPROPERTIES="FIXED" text=white><script language="javascript"> if(document.all) { drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array(); ly = "document.all[\'"; st = "\'].style"; for(make=0; make<num_drops; make++) { document.write('<div id="drop'+make+'" class=drop>'+sym+'</div>'); drop[make] = eval(ly+'drop'+make+st); maxx = doc_clientleft + doc_clientwidth; maxy = doc_clienttop + doc_clientheight; xx[make] = (make + 1) * increment + doc_clientleft + left_indent; rainposx[make] = xx[make]; yy[make] = Math.random() * doc_clientheight + doc_clienttop; drop[make].left = xx[make]; drop[make].top = yy[make]; mv[make] = (Math.random() * 5) + (speed / 4); drop[make].fontSize = 16; drop[make].color = '#00ffff'; } moverain(); document.write("<div id=\"lightning\" style=\"POSITION: absolute; Z-INDEX: 0; VISIBILITY: hidden; TOP: 0px; LEFT: 0px;\"><img src='"+lightning_image+"' border=\"0\"></div>"); document.all["lightning"].style.top = doc_clienttop; movelightning(); document.all["lightning"].style.visibility = "visible"; }</script></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/mouse/Raining_and_Lighting/lightning.gifhttp://javascriptbank.com/javascript/mouse/Raining_and_Lighting/Ocean_Wave.jpg