Js_特效II

瀛??風緝??????璁╂??瀛?澶х?癸?璁╂?村????ㄦ?風?????存?妤???(涔???浠ユ??瀛?浣???涓虹?懼??姣??ュ????

function doZoom(size)??

{document.getElementById('zoom').style.fontSize=size+'px';}??

</script>??

<span id="zoom">??瑕???瀹?澶у?????瀛?</span>? 缃?椤墊??瀛??http://www.webjx.com

????璺寵漿?????扮????<select name="select" 慰nchange="window.open(this.options[this.selectedIndex].value)">??

<option value="http://www.microsoft.com/ie"> Internet Explorer</option>??

<option value="http://www.microsoft.com"> Microsoft Home</option>??

<option value="http://msdn.microsoft.com"> Developer Network</option>??

</select>

????娣誨???版?惰??澶瑰??璁句負棣?椤?

????娣誨???版?惰??澶?<a href="javascript:window.external.addFavorite('http://?炬??,'璇存??');" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >娣誨???版?惰??澶?lt;/a>

????璁句負棣?椤?<a href=# 慰nclick=this.style.behavior='url(#default#homepage)';this.setHomePage ('http://?炬??);>璁句負棣?椤?lt;/a>

??????寮?绐??ｅ?蟲??澶у??

<!-- Begin???

self.moveTo(0,0)??? 缃?椤墊??瀛??http://www.webjx.com

self.resizeTo(screen.availWidth,screen.availHeight)???

// End -->???

</script>

???????ヨ?????充?

<bgsound src="mid/windblue[1].mid" loop="-1"> ?????ㄤ?IE??

瀵?etscape ,IE ?介??????

?????叉?㈢?瑰?葷┖?炬?ユ?訛?椤甸?㈠?寰???缃??伴〉棣?绔?

????浠ｇ????javascript:void(null)??浠ｆ?垮???ョ????#????璁幫?涔???浠ョ?ㄢ??#nogo???ヤ唬?垮??锛?

???????ㄦ?㈣?

?style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"

??????瀵?E????..FF??璇???verflow:hidden?ヨВ?籌?涓??充?褰卞??缇?瑙?

1.涓????堕?存?墊?劇ず涓???????璇?

??????script Language="Javascript"????????!-- ????var text=""; day = new Date( ); time = day.getHours( ); ????if (( time??=0) && (time ?? 7 )) ????????text="澶???瀛?锛?瑕?娉ㄦ??韬?浣??? " ????if (( time ??= 7 ) && (time ?? 12)) ????????text="浠?澶╃???沖?????跨????锛?浣??ｄ釜??????" ????if (( time ??= 12) && (time ?? 14)) ????????text="??浼??堕?淬???ㄨ?淇????＄????" ????if (( time ??=14) && (time ?? 18)) ????????text="绁??ㄤ???宸ヤ???蹇?! " ????if ((time ??= 18) && (time ??= 22)) ????????text="?ㄥ???ヤ?锛???????MM??澶?涔???" ????if ((time ??= 22) && (time ?? 24)) ????????text="?ㄥ?璇ヤ???浜?!" ????document.write(text) ????//---????????/script??

????2.?㈡?㈠??澶х??绐???

??????script Language="Javascript"????????!-- ????var Windowsheight=100 ????var Windowswidth=100 ????var numx=5 ????function openwindow(thelocation){ ????temploc=thelocation ????if ????(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById)) ????{ ????????window.open(thelocation) ????????return ????} ????windowsize=window.open("","","scrollbars") ????windowsize.moveTo(0,0) ????windowsize.resizeTo(100,100) ????tenumxt() ????} ????function tenumxt(){ ????if (Windowsheight??=screen.availHeight-3) ????????numx=0 ????windowsize.resizeBy(5,numx) ????Windowsheight+=5 ????Windowswidth+=5 ????if (Windowswidth??=screen.width-5) ????{ ????????windowsize.location=temploc ????????Windowsheight=100 ????????Windowswidth=100 ????????numx=5 ????????return ????} ????setTimeout("tenumxt()",50) ????} ????//--????????/script????????p????a href="javascript:openwindow('http://www.ccjol.com')" target="_blank" rel="external nofollow" ??杩??ャ??/a??

????3.?瑰??IE?闆??????IE?炬??

??????浠?瑕?????涓?涓?16*16??icon(?炬????浠?锛?淇?瀛?涓?ndex.ico????杩?涓??炬????浠朵?浼??版?圭??褰?涓?骞跺?ㄩ?椤點??head????/head??涔??村??涓?濡?涓?浠ｇ??锛? ??????link REL = "Shortcut Icon" href="index.ico" target="_blank" rel="external nofollow" ??

????4.璁╃?椤甸????????

??????a href="javascript:history.go(-X)" target="_blank" rel="external nofollow" ??X??/a?? //??X?㈡??浣??寵??????ㄩ〉?般???? //????-????????+??灏變負??杩?

????5.榧????????跺脊?轟俊??妗?

?????ㄣ??body????/body??涔??村??涓?濡?涓?浠ｇ??锛? ??????a href 慰nm慰use慰ver="alert('寮瑰?轟俊??!')"???劇ず???炬?ユ??瀛???/a??

????6.???婚????抽??寮瑰?烘坊???惰??澶瑰?矽??妗?

?????ㄣ??body????/body??涔??村??涓?濡?涓?浠ｇ??锛? ?? ??script Language=Javascript?? if (document.all) ????document.body.慰nm慰used慰wn=new Function("if (event.button==2||event.button==3) ????window.external.addFavorite('?ㄧ??缃???','?ㄧ??缃?绔???绉?") ??????/script??

????7.???哄???㈣?????捐薄(涓?涓???浠ュ?鋒?闆??????規??)

?????ㄣ??head????/head??涔??村??涓?濡?涓?浠ｇ??锛? ??????script Language="Javascript"??????image = new Array(4); //瀹?涔?image涓哄?劇???伴?????扮?????image [0] = 'tu0.gif' //?????捐薄??璺?寰?????image [1] = 'tu1.gif' ????image [2] = 'tu2.gif' ????image [3] = 'tu3.gif' ????image [4] = 'tu4.gif' ????number = Math.floor(Math.random() * image.length); ????document.write("??BODY BACKGROUND="+image[number]+"??"); ??????/script??

????8.琛ㄦ?肩?????????劇ず????

??????head????????style??????.alpha{filter: Alpha(Opacity=50)} //50琛ㄧず50%??????搴???????/style?? ??/head?? ??????body????????table width="100" height="62" class="alpha" bgcolor="#F2A664" ????????tr????????td width="100%" height="62"????????div align="center"??寰??峰????/div????????/td????????/tr????????/table?? ??/body??

a. ???ㄦ????锛?16琛?JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html { margin:0px; padding:0px; overflow:auto; }

body { margin:0px; padding:15px; }

#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }

#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div id="t">Demo Win - Drag me</div>

?<div id="winBody">Hello world</div>

</div>

</body>

(function(o,s,x,y,d){

?s = o.style;

?d = document;

?o.onselectstart = function(){ return false; }; //?繪?㈤?????o.onmousedown = function(e){

??e = e||event;

??x = e.clientX-o.offsetLeft;

??y = e.clientY-o.offsetTop;

??d.onmousemove = function(e){

???e = e||event;

???s.left = e.clientX - x + "px";

???s.top = e.clientY - y + "px";

??}

??d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }

})(document.getElementById("w"))

</script>

</html>

b. 娣″?ユ貳?烘????锛?8琛?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html { margin:0px; padding:0px; overflow:auto; }

body { margin:0px; padding:15px; background-color:buttonface; }

#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }

#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div id="t">Demo Win - Fade</div>

?<div id="winBody">Hello world</div>

</div>

</body>

(function(o,i,s){

?i=1;s=0.01;

?setInterval(function(){

??i+=s; s=i<0?0.01:(i>1?-0.01:s);

??if(o.filters)o.filters[0].opacity=i*100;

??else o.style.opacity=i;

?},1);

})(document.getElementById("w"));

</script>

</html>

c. ?哄??浣?缃?娴??ㄦ????锛?9琛?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Fixed</title>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html, body { margin:0px; padding:0px; overflow:hidden; }

.b { margin:0px; padding:0px; overflow:auto; }

.line0 { line-height:20px; padding:0px 15px; }

.line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }

.w { position:absolute; right:10px; bottom:10px; width:160px; height:240px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }

.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

.winBody { height:218px; width:160px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div class="t">Demo Win - Fixed</div>

?<div class="winBody">Hello world</div>

</div>

</body>

//娴?璇???????轟駭??涓?瀹?????瀹?for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");

//浠ｇ??濡?涓?锛?

new function(w,b,c,d,o){

?d=document;b=d.body;o=b.childNodes;c="className";

?b.appendChild(w=d.createElement("div"))[c]= "b";

?for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;

?(window.onresize = function(){

??w.style.width = d.documentElement.clientWidth + "px";

??w.style.height = d.documentElement.clientHeight + "px";

?})();

}

</script>

</html>

d. 婊??ㄥ脊?烘????锛?6琛?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Popup</title>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html { margin:0px; padding:0px; overflow:auto; }

body { margin:0px; padding:15px; }

#w { position:absolute; width:1px; height:1px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }

#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div id="t">Demo Win - Popup</div>

?<div id="winBody">Hello world</div>

</div>

</body>

(function(o,t,i,j,s){

?i=j=1;s=o.style;

?t=setInterval(function(){

??o.offsetWidth<480?(s.width=(482-600/++i<<0)+"px"):(o.offsetHeight<270?s.height=(272-400/++j<<0)+"px":clearInterval(t));

?},15);

})(document.getElementById("w"));

</script>

</html>

??3??璁?elect?т歡??浠ヨ??瀹?涔?杈規?

<style>?

.box2{border:1px solid #00ff00;width:180px;height:17px;clip:rect(0px,179px,16px,0px);overflow:hidden;}?

select{position:relative;left:-2px;top:-2px;font-size:12px;width:183px;line-height:14px;border:0px;color:#909993;}?

</style>?

<div class="box2"><select id=idselect1 慰nchange="select1();" hidefocus>?

<option selected>缃?椤靛??</option>?

<option>缃?椤靛?朵?</option>?

<option>濯?浣??ㄧ??lt;/option>?

<option>缃?绔?杩???lt;option>?

</select></div>

?????? 4??CSS??瑙?

<html xmlns:v>?

<head>?

?<style>?

?v\:* {behavior: url(#default#VML);}?

?</style>?

</head>?

<body>??

<v:RoundRect style="position:relative;width:200;height:100px">?

?<v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>?

?<v:textbox style="font-size:12px">css瀹??扮??姝ｇ????瑙?琛ㄦ??lt;/v:textbox>?

?</v:RoundRect>?

</body>?

</html>

?藉??規???劇??html浠ｇ?????ㄧ?????充?瑙????闆??瀵艱????????

涓??ヨ???芥?拌????瀹??闆?劇?????㈢?規????

寮???

picChange("?劇??ul??琛ㄧ??id" , ???㈠?劇?????規?寮???, ?劇?????㈡?堕??, ?劇??绉誨?ㄦ?瑰??);

???╁???灏?瑁??瑰?锛??逛究瀹??頒????規??锛?婧???涓?缁??轟?娣″?烘????锛???绉誨?烘??????瀹??版?瑰???

浣跨?ㄦ?規?绀轟?锛?

寮???

//?存?ュ???㈡????

picChange("picChange");

//娣″?烘????

picChange("picChange",fade,500);

//??涓?绉誨?烘????

picChange("picChange",move,500,"up");

//??涓?绉誨?烘????

picChange("picChange",move,500,"down");?

//??宸?Щ?烘????

picChange("picChange",move,500,"left");?

//???崇Щ?烘????

picChange("picChange",move,500,"right");

?惰????绔?

<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.webjx.com','缃?椤墊??瀛??')" title="缃?椤墊??瀛??">?惰????绔?</span>?

??锛?

????function bookmarkit()?

????{?

????window.external.addFavorite('http://www.webjx.com','缃?椤墊??瀛??')?

????}?

????if (document.all)document.write('<a href="#" target="_blank" rel="external nofollow" onClick="bookmarkit()">???ユ?惰??澶?lt;/a>')?

????</script>

???ㄧ?????ユ?惰??澶?<script type="text/javascript">?

// <![CDATA[?

function bookmark(){?

var title=document.title?

var url=document.location.href?

if (window.sidebar) window.sidebar.addPanel(title, url,"");?

else if( window.opera && window.print ){?

var mbm = document.createElement('a');?

mbm.setAttribute('rel','sidebar');?

mbm.setAttribute('href',url);?

mbm.setAttribute('title',title);?

mbm.click();}?

else if( document.all ) window.external.AddFavorite( url, title);?

// ]]>?

</script>???

??E6-7. FF2.0 OP9.0涓?娴?璇???杩?

璁句負棣?椤?<span 慰nclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.webjx.com');" style="CURSOR: hand">璁句負棣?椤?lt;/span>

杩???椤甸?

瀛??風緝??

????璁╂??瀛?澶х?癸?璁╂?村????ㄦ?風?????存?妤???(涔???浠ユ??瀛?浣???涓虹?懼??姣??ュ????

function doZoom(size)??

{document.getElementById('zoom').style.fontSize=size+'px';}??

</script>??

<span id="zoom">??瑕???瀹?澶у?????瀛?</span>? 缃?椤墊??瀛??http://www.webjx.com

????璺寵漿?????扮????

<select name="select" 慰nchange="window.open(this.options[this.selectedIndex].value)">??

<option value="http://www.microsoft.com/ie"> Internet Explorer</option>??

<option value="http://www.microsoft.com"> Microsoft Home</option>??

<option value="http://msdn.microsoft.com"> Developer Network</option>??

</select>

????娣誨???版?惰??澶瑰??璁句負棣?椤?

????娣誨???版?惰??澶?

????璁句負棣?椤?

??????寮?绐??ｅ?蟲??澶у??

<!-- Begin???

self.moveTo(0,0)??? 缃?椤墊??瀛??http://www.webjx.com

self.resizeTo(screen.availWidth,screen.availHeight)???

// End -->???

</script>

???????ヨ?????充?

<bgsound src="mid/windblue[1].mid" loop="-1"> ?????ㄤ?IE??

瀵?etscape ,IE ?介?????

?????叉?㈢?瑰?葷┖?炬?ユ?訛?椤甸?㈠?寰???缃??伴〉棣?绔?

????浠ｇ????javascript:void(null)??浠ｆ?垮???ョ????#????璁幫?涔???浠ョ?ㄢ??#nogo???ヤ唬?垮??锛?

???????ㄦ?㈣?

?style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"

??????瀵?E????..FF??璇???verflow:hidden?ヨВ?籌?涓??充?褰卞??缇?瑙?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>????娉㈠?ㄦ???? - Zehee</title>

var lightWave = function(T,left,thick,sharp,speed,vibration,amplitude,opacity){

?this.cont = T;//??瑕?娣誨????????瀹瑰???this.left = left;//?????虹???剁?????沖??绉婚??

?this.thick = thick;//绮?缁?绋?搴??this.sharp = sharp;//灏???绋?搴??this.speed = speed;//娉㈠?ㄩ??搴??this.vibration = vibration;//??浣??堕?村???????ㄩ???

?this.amplitude = amplitude;//??骞?

?this.opacity = opacity;//????搴??this.cont.style.position = 'relative';

?this.move();

}

lightWave.prototype = {

?point:function(n,l,t,c,color){

??var p = document.createElement('p');

??p.innerHTML = ' ';

??p.style.top = t + 'px';

??p.style.left = l + 'px';

??p.style.width = 1 + 'px';

??p.style.height = n + 'px';

??p.style.filter = 'alpha(opacity='+this.opacity+')';

??p.style.lineHeight = 0;

??p.style.position = 'absolute';

??p.style.background = color;

??c.appendChild(p);

??return this;

?},

?color:function(){

??var c = ['0','3','6','9','c','f'];

??var t = [c[Math.floor(Math.random()*100)%6],'0','f'];

??t.sort(function(){return Math.random()>0.5?-1:1;});

??return '#'+t.join('');

?},

?wave:function(){

??var l = this.left,t = this.wavelength,color = this.color();

??var c = document.createElement('div');

??c.style.top = this.amplitude+20+'px';

??c.style.position = 'absolute';

??c.style.opacity = this.opacity/100;

??for(var i=1;i<this.thick;i++){

???for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){

????this.point(i,l,-9999,c,color);

???}

??}

??for(var i=this.thick;i>0;i--){

???for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){

????this.point(i,l,-9999,c,color);

???}

??}

??this.cont.appendChild(c);

??return c;

?},

?move:function(){

??var wl = this.amplitude;

??var vibration = this.vibration;

??var w = this.wave().getElementsByTagName('p');

??for(var i=0;i<w.length;i++){

???w[i].i = i;

??}

??var m = function(){

???for(var i=0,len=w.length;i<len;i++){

????if(w[i].ori == true){

?????w[i].i-=vibration;

?????var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);

?????w[i].style.top = top+'px';

?????if(parseFloat(w[i].style.top)<=-wl){

??????w[i].ori = false;

?????}

????}else{

?????w[i].i+=vibration;

?????var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);

?????w[i].style.top = top+'px';

?????if(parseFloat(w[i].style.top)>=wl){

??????w[i].ori = true;

?????}

????}

???}

??}

??setInterval(m,this.speed);

}

window.onload = function(){

?var targetDom = document.body;

?new lightWave(targetDom,0,3,36,120,6,20,40);

?new lightWave(targetDom,50,2,70,120,10,30,30);

}

</script>

</head>

</body>

</html>

???幫?

var? lightWave = function (T,left,thick,sharp,speed,vibration,amplitude,opacity)

{

?????? this .cont = T; //??瑕?娣誨????????瀹瑰???????? this .left = left; //?????虹???剁?????沖??绉婚??

?????? this .thick = thick; //绮?缁?绋?搴??????? this .sharp = sharp; //灏???绋?搴??????? this .speed = speed; //娉㈠?ㄩ??搴??????? this.vibration = vibration; //??浣??堕?村???????ㄩ???

?????? this .amplitude = amplitude; //??骞?

?????? this .opacity = opacity; //????搴??????? this .cont.style.position = 'relative';

?????? this .move();

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>????娉㈠?ㄦ???? - Zehee</title>

var lightWave = function(T,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity){

?this.cont = T;//??瑕?娣誨????????瀹瑰???this.hz = parseFloat(hz);//?鋒?扮??

?this.top = parseFloat(top);//?????虹???剁????涓???绉婚??

?this.left = parseFloat(left);//?????虹???剁?????沖??绉婚??

?this.thick = parseFloat(thick);//绮?缁?绋?搴??this.sharp = parseFloat(sharp);//灏???绋?搴??this.particle = parseFloat(particle);//缁???绮?瀛???澶у?

?this.velocity = parseFloat(velocity);//娉㈤??

?this.amplitude = parseFloat(amplitude);//??骞?

?this.opacity = parseFloat(opacity);//????搴??this.cont.style.position = 'relative';

?this.move();

}

lightWave.prototype = {

?point:function(n,left,t,wavecont,color,particle){

??var p = document.createElement('p');

??p.i = left;

??p.innerHTML = ' ';

??p.style.top = t + 'px';

??p.style.left = left + 'px';

??p.style.width = particle + 'px';

??p.style.height = n + 'px';

??p.style.filter = 'alpha(opacity='+this.opacity+')';

??p.style.lineHeight = 0;

??p.style.fontSize = 0;

??p.style.position = 'absolute';

??p.style.background = color;

??wavecont.appendChild(p);

??return this;

?},

?color:function(){

??var c = ['0','3','6','9','c','f'];

??var t = [c[Math.floor(Math.random()*100)%6],'0','f'];

??t.sort(function(){return Math.random()>0.5?-1:1;});

??return '#'+t.join('');

?},

?wave:function(){

??var left = this.left,t = this.wavelength,color = this.color(),particle = this.particle,l = 0;

??var wavecont = document.createElement('div');

??wavecont.style.top = this.amplitude+this.top+'px';

??wavecont.style.left = left+'px';

??wavecont.style.position = 'absolute';

??wavecont.style.opacity = this.opacity/100;

??for(var i=1;i<this.thick;i++){

???for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){

????this.point(i,l*particle,-9999,wavecont,color,particle);

???}

??}

??for(var i=this.thick;i>0;i--){

???for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){

????this.point(i,l*particle,-9999,wavecont,color,particle);

???}

??}

??this.cont.appendChild(wavecont);

??return wavecont;

?},

?move:function(){

??var wl = this.amplitude;

??var velocity = this.velocity;

??var w = this.wave().getElementsByTagName('p');

??var m = function(){

???for(var i=0,len=w.length;i<len;i++){

????if(w[i].ori == true){

?????w[i].i-=velocity;

?????var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);

?????w[i].style.top = top+'px';

?????if(parseFloat(w[i].style.top)<=-wl){

??????w[i].ori = false;

?????}

????}else{

?????w[i].i+=velocity;

?????var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);

?????w[i].style.top = top+'px';

?????if(parseFloat(w[i].style.top)>=wl){

??????w[i].ori = true;

?????}

????}

???}

??}

??setInterval(m,this.hz);

}

</script>

</head>

<body>

<p><input id="thick" type="text" value="3" /><label>- 绮?缁?绋?搴?lt;/label></p>

<p><input id="sharp" type="text" value="9" /><label>- 灏???绋?搴?lt;/label></p>

<p><input id="opacity" type="text" value="40" /><label>- ????搴?lt;/label></p>

</div>

var waves = document.getElementById('waves');

var born = document.getElementById('born');

var clear = document.getElementById('clear');

born.onclick = function(){

?var hz = document.getElementById('hz').value;

?var top = document.getElementById('top').value;

?var left = document.getElementById('left').value;

?var thick = document.getElementById('thick').value;

?var sharp = document.getElementById('sharp').value;

?var particle = document.getElementById('particle').value;

?var velocity = document.getElementById('velocity').value;

?var amplitude = document.getElementById('amplitude').value;

?var opacity = document.getElementById('opacity').value;

?new lightWave(waves,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity);

}

clear.onclick = function(){window.location.reload();}

</script>

</body>

</html>

???幫?

var? lightWave = function (T,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity){

?????? this .cont = T; //??瑕?娣誨????????瀹瑰???????? this .hz = hz; //?鋒?扮??

?????? this .top = top; //?????虹???剁????涓???绉婚??

?????? this .left = left; //?????虹???剁?????沖??绉婚??

?????? this .thick = thick; //绮?缁?绋?搴??????? this .sharp = sharp; //灏???绋?搴??????? this .particle= particle; //绮?瀛??垮害

?????? this.velocity= velocity; //娉㈤??

?????? this .amplitude = amplitude; //??骞?

?????? this .opacity = opacity; //????搴??????? this .cont.style.position = 'relative';

?????? this .move();

}

a. ???ㄦ????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html { margin:0px; padding:0px; overflow:auto; }

body { margin:0px; padding:15px; }

#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }

#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div id="t">Demo Win - Drag me</div>

?<div id="winBody">Hello world</div>

</div>

</body>

(function(o,s,x,y,d){

?s = o.style;

?d = document;

?o.onselectstart = function(){ return false; }; //?繪?㈤?????o.onmousedown = function(e){

??e = e||event;

??x = e.clientX-o.offsetLeft;

??y = e.clientY-o.offsetTop;

??d.onmousemove = function(e){

???e = e||event;

???s.left = e.clientX - x + "px";

???s.top = e.clientY - y + "px";

??}

??d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }

})(document.getElementById("w"))

</script>

</html>

b. 娣″?ユ貳?烘????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html { margin:0px; padding:0px; overflow:auto; }

body { margin:0px; padding:15px; }

#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }

#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div id="t">Demo Win - Fade</div>

?<div id="winBody">Hello world</div>

</div>

</body>

(function(o,i,s){

?i=1;s=0.01;

?setInterval(function(){

??i+=s; s=i<0?0.01:(i>1?-0.01:s);

??if(o.filters)o.filters[0].opacity=i*100;

??else o.style.opacity=i;

?},1);

})(document.getElementById("w"));

</script>

</html>

?c. ?哄??浣?缃?娴??ㄦ????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Fixed</title>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html, body { margin:0px; padding:0px; overflow:hidden; }

.b { margin:0px; padding:0px; overflow:auto; }

.line0 { line-height:20px; padding:0px 15px; }

.line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }

.w { position:absolute; right:10px; bottom:10px; width:160px; height:240px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }

.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

.winBody { height:218px; width:160px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div class="t">Demo Win - Fixed</div>

?<div class="winBody">Hello world</div>

</div>

</body>

//娴?璇???????轟駭??涓?瀹?????瀹?for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");

//浠ｇ??濡?涓?锛?

new function(w,b,c,d,o){

?d=document;b=d.body;o=b.childNodes;c="className";

?b.appendChild(w=d.createElement("div"))[c]= "b";

?for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;

?(window.onresize = function(){

??w.style.width = d.documentElement.clientWidth + "px";

??w.style.height = d.documentElement.clientHeight + "px";

?})();

}

</script>

</html>

d. 婊??ㄥ脊?烘????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Popup</title>

<style>

* { font-size:12px; font-family:Verdana,瀹?浣?; }

html { margin:0px; padding:0px; overflow:auto; }

body { margin:0px; padding:15px; }

#w { position:absolute; width:1px; height:1px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }

#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }

#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }

</style>

</head>

<body>

?<div id="t">Demo Win - Popup</div>

?<div id="winBody">Hello world</div>

</div>

</body>

(function(o,t,i,j,s){

?i=j=1;s=o.style;

?t=setInterval(function(){

??o.offsetWidth<480?(s.width=(482-600/++i<<0)+"px"):(o.offsetHeight<270?s.height=(272-400/++j<<0)+"px":clearInterval(t));

?},15);

})(document.getElementById("w"));

</script>

</html>

?劇?????烘?劇ず??涓?涓?搴??ㄩ??甯稿箍娉?????宸с??姣?濡?????anner???劇ず锛?褰?浣?杩??ヤ?涓?缃?绔??跺????banner?繪??涓?????锛??????繪????瀹逛???????绀猴?tips)锛?澶у?跺?ㄧ?涓?娴?瑙??朵?缁?甯稿???拌??風??渚?瀛???浣跨?ㄨ?绉?????锛?涓?浣??藉?ㄤ?瀹???绌洪?撮???懼?ユ?村?????瀹癸?杩???浠ョ?浜轟?绉?缁?甯告?存?扮????璞″????

??涔??峰??ㄤ??э??跺????瑕?浣???涓??圭??tml??javascript ???虹?锛?涓????芥??杩?涔?绠?????follow me,璁╂??浠??ョ????濂歸???虹??濂ュ????

璁╂??浠?浠?涓?涓?绠?????渚?瀛?寮?濮??с??骞沖父??浠??ㄩ〉??腑???ュ?劇???芥????lt;img src="?劇??">?ュ??????濡?????浠?瑕????烘?劇ず3寮?涓??????劇??灏辮?瀵矽??ヤ唬??杩?琛?灏?灏???淇??癸?棣???????lt;script>??璁幫?

浠ヤ???寮??ㄧ??娈碉?

?跺???ㄨ?娈墊??璁闆????<img src="?劇??">??ocument.write("")????寮??捐??夥?灏辨??浜???

document.write("<img src=?劇??>")?

?闆?ㄦ??浠??ュ???????沖緩??涓?娈碉?

浠ヤ???寮??ㄧ??娈碉?

id=Math.round(Math.random()*2)+1?

杩??峰??寰????烘?頒負1,2,3灏?浣?瑕??劇ず???劇???瑰??涓?.gif,2.gif,3.gif锛?ok锛???????浠ｇ????锛?

浠ヤ???寮??ㄧ??娈碉?

id=Math.round(Math.random()*2)+1?

document.write("<img src="+id+".gif>")?

</script>?

璇?涓?涓?锛???涓???涓???锛??ｅ???????姣?涓?寮??劇???藉?瑰?浜?涓?涓?瓒??炬?ヨ?ユ??涔??????

??浠?杩????ュ??璁句?涓???3寮??劇??锛?1.gif,2.gif,3.gif,????瀵瑰????炬?ユ??url1,url2,url3??

涓轟?璁╁?劇?????炬?ヤ?涓?瀵瑰?锛???浠?瑕?璁劇疆涓?涓??扮?image?ユ?劇疆?炬?ョ???闆??锛?濡?涓?锛?

浠ヤ???寮??ㄧ??娈碉?

var image=new Array(3)?

image.length=3?

image[1]="url1"?

image[2]="url2"?

image[3]="url3"?

涓轟?灏?涓??劇??瀵瑰????炬?ュ???烘?ワ???浠?杩?瑕?瀹?涔?涓?涓??扮?imageurl=image[id]

??????杩??風??锛?

褰?椤甸?㈣?璇誨?ユ?訛???涓?涓????烘?幫???璁炬??2??d=2,?ｄ?濡?涓???浠???杞繪?劇??瀹???2.gif?ㄩ〉?㈢???劇ず???跺????浠???浠ョ???幫?imageurl=image[2]??image[2]="url2"锛??╀???浜?灏卞ソ??浜???瀹??寸??浠ｇ??濡?涓?锛?

浠ヤ???寮??ㄧ??娈碉?

var image=new Array(3)?

image.length=3?

image[1]="url1"?

image[2]="url2"?

image[3]="url3"?

id=Math.round(Math.random()*2)+1?

imageurl=image[id]?

document.write("<a href="+bannerurl+" target="_blank" rel="external nofollow" >"+"<img src="+id+".gif>")?

</script>

????锛???澶╀????烽ゼ???藉??璇磋??э??靛?碉??烽ゼ瀹?绠?涓?涔?锛?浠?澶╂??浣?涓?涓?澶╀???锟ョ?????匡?骞朵?锝?锝????????版??锛???锝???锝???锛??ュ??_*

????棣?????????

灏?涓??㈢??JavaScript浠ｇ??????lt; head >?哄氨??浜?:

< Script Language="JavaScript" >

< !-- Begin

var no = 30;

//璁懼??涓??藉??绗??伴??

var speed = 5;

//璁懼??瀛?绗???界????搴?var ns4up = (document.layers) ? 1 : 0;

var ie4up = (document.all) ? 1 : 0;

//NETSCAP??IE涓ょ?涓???娴?瑙??ㄥ????杩?琛?瀹?涔?

var s, x, y, sn, cs;

var a, r, cx, cy;

var i, doc_width = 800, doc_height = 600;

//璁懼??瀛?绗???藉?哄??涓?00*600

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

else

if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

//NETSCAP??IE涓ょ?娴?瑙??ㄦ????

x = new Array();

y = new Array();

r = new Array();

cx = new Array();

cy = new Array();

s = 8;

for (i = 0; i < no; ++ i) {

initRain();

//瀹?涔??????扮?x, y, cx, cy, s

if (ns4up) {

if (i == 0) {

document.write("< layer name=\"dot"+ i +"\" left=\"1\" ");

document.write("top=\"1\" visibility=\"show\" >< font color=\"white\" >");

document.write(",锟?lt; /font >< /layer >");

}

else {

document.write("< layer name=\"dot"+ i +"\" left=\"1\" ");

document.write("top=\"1\" visibility=\"show\" >< font color=\"white\" >");

document.write(", $ < /font >< /layer >");

}

//褰?i==0婊¤凍涓????訛?NETSCAP涓???琛ㄧ??else

if (ie4up) {

if (i == 0) {

document.write("< div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\" >< font size=\"10\" color=\"white\" >");

document.write("锟?lt; /font >< /div >");

}

else {

document.write("< div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\" >< font size=\"10\" color=\"white\" >");

document.write(" $ < /font >< /div >"); //璁懼??瑕?涓??界????瀛?绗??锟ャ??$锛???浣?缃?

}

//褰?i==0婊¤凍涓?涓?婊¤凍?訛?IE娴?瑙??ㄤ腑??琛ㄧ??}

function initRain() {

a = 6;

r[i] = 1;

sn = Math.sin(a);

cs = Math.cos(a);

cx[i] = Math.random() * doc_width + 1;

cy[i] = Math.random() * doc_height + 1;

x[i] = r[i] * sn + cx[i];

y[i] = cy[i];

}

function makeRain() {

r[i] = 1;

cx[i] = Math.random() * doc_width + 1;

cy[i] = 1;

x[i] = r[i] * sn + cx[i];

y[i] = r[i] * cs + cy[i];

}

function updateRain() {

r[i] += s;

x[i] = r[i] * sn + cx[i];

y[i] = r[i] * cs + cy[i];

}

function raindropNS() {

for (i = 0; i < no; ++ i) {

updateRain();

//瀹?涔??????扮? a , sn , cs , cx, cy, s

if ((x[i] < = 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {

makeRain();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

document.layers["dot"+i].top = y[i];

document.layers["dot"+i].left = x[i];

}

setTimeout("raindropNS()", speed);

}

function raindropIE() {

for (i = 0; i < no; ++ i) {

updateRain();

//??ETSCAP娴?瑙??ㄤ腑??浠??艱?绋?

if ((x[i] < = 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {

makeRain();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

document.all["dot"+i].style.pixelTop = y[i];

document.all["dot"+i].style.pixelLeft = x[i];

}

setTimeout("raindropIE()", speed);

}

if (ns4up) {raindropNS(); }

else

if (ie4up) {raindropIE(); }

//??E娴?瑙??ㄤ腑??浠??艱?绋?

// End -- >

< /Script >

瀹??拌?椹??????規?寰?澶?锛?????璇??浠?缁?JavaScript/JS瀹??版??棰???璺?椹?????

????灏?涓?浠ｇ??copy?ヤ?缃?椤電????涓????????版?瑰?沖????

浠ヤ???寮??ㄧ??娈碉?

<SCRIPT LANGUAGE=JAVASCRIPT>?

<!--?

var msg = "璁╂??浠???寰??村ソ";?

var speed = 300;?

var msgud = " " + msg;?

function titleScroll() {?

if (msgud.length msgud = msgud.substring(1, msgud.length);?

document.title = msgud.substring(0, msg.length);?

window.setTimeout("titleScroll()", speed);?

-->?

</SCRIPT>

????灏?浣?Html??浠剁???逛負濡?涓?锛?

浠ヤ???寮??ㄧ??娈碉?

????娉??濡????ㄨ薄??涓??鋒??瀹??懼?ㄧ???ｄ腑锛?璇峰?document.title?逛負parent.document.title

function cls_marquee(id,id1,id2,sp){

??? this.obj_id=id;

??? this.obj_id1=id1;

??? this.obj_id2=id2;

??? this.speed=sp;

??? eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML");

????

???? function Marquee(){

?????? if(eval(id2).offsetTop-eval(id).scrollTop<=0)

????????????? eval(id).scrollTop-=eval(id1).offsetHeight

????????? else{

????????????? eval(id).scrollTop++

??????????? }

???????? var MyMar=setInterval(Marquee,sp)

???????? eval(this.obj_id).慰nm慰use慰ver=function() {clearInterval(MyMar)}

???????? eval(this.obj_id).慰nm慰use慰ut=function() {MyMar=setInterval(Marquee,sp)}

? }

杞?杞戒?:https://www.cnblogs.com/ingstyle/p/4668308.html

Js_特效II

寮???

寮???

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條