正文

【web技术】html特效代码（一）

IP云
IP云V管理员/3 阅读
09/23
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

小续

还记得当初和八哥一起制作百家成员chm电子书的时候，各种特效啊，这里收集了一些个人比较喜欢的html特效，看个人喜欢了，不喜勿喷啊

html特效代码（一）

html特效代码（二）

3D相册代码

  1. <embed

  2. src="http://flash.picturetrail.com/pflicks/acrobatcube_r.swf"

  3. loop="false"quality="high"

  4. FlashVars="backopacity=100&cubecroptofit=1&enlargecroptofit=0&

  5. logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf

  6. &ptdim=50.10&ptxy=180.16&faceopacity=80

  7. &img1=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244048256.jpg

  8. &img2=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043049.jpg

  9. &img3=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043047.jpg

  10. &img4=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043044.jpg

  11. &img5=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043042.jpg

  12. &img6=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043040.jpg"

  13. wmode="transparent"bgcolor="transparent"

  14. width="180"height="160"

  15. name="acrobatcube"id="acrobatcube"align="middle"allowScriptAccess="sameDomain"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer">

  16. </embed>

斗转星移

  1. <html>

  2. <head>

  3. </head>

  4. <body>

  5. <styletype="text/css">

  6. #sDiv0, #sDiv1, #sDiv2, #sDiv3, #sDiv4, #sDiv5, #sDiv6, #sDiv7, #sDiv8, #sDiv9

  7. {

  8. position:absolute; height:1; width:1; font-family:arial black; font-size:9px; color:#FFFFAA; z-index:10;

  9. }

  10. </style>

  11. <bodybgcolor="#000000">

  12. <SCRIPTLANGUAGE="JavaScript1.2">

  13. var ns=(document.layers);

  14. var ie=(document.all);

  15. var w3=(document.getElementById && self.innerWidth && (window.pageXOffset>-1));

  16. var allDivs      = new Array(10);

  17. var documentWidth,documentHeight;

  18. function initAll(){

  19. if(!ns && !ie && !w3)        return;

  20. for(dNum=0; dNum<10; ++dNum){

  21. if(ie)                allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');

  22. else if(ns)        allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');

  23. else if(w3)        allDivs[dNum]=eval('document.getElementById("sDiv'+dNum+'").style');

  24. moveTo(dNum,0,0);

  25. }

  26. }

  27. function moveTo(I,tempx,tempy){

  28. if (ie){

  29. documentdocumentWidth  =document.body.offsetWidth+document.body.scrollLeft-20;

  30. randomy=Math.floor(Math.random()*document.body.offsetHeight)+document.body.scrollTop-20;

  31. }

  32. else if (ns){

  33. documentWidth=window.innerWidth+window.pageXOffset-20;

  34. randomy=Math.floor(Math.random()*window.innerHeight)+window.pageYOffset-20;

  35. }

  36. else if (w3){

  37. documentWidth=self.innerWidth+window.pageXOffset-20;

  38. randomy=Math.floor(Math.random()*self.innerHeight)+window.pageYOffset-20;

  39. }

  40. if(tempx>-50){

  41. tempx-=45;

  42. allDivs[I].left=tempx;

  43. allDivs[I].top =tempy;

  44. setTimeout("moveTo("+I+","+tempx+","+tempy+")",40)

  45. }

  46. else

  47. setTimeout("moveTo("+I+",documentWidth-10,randomy)",2000/I+40);

  48. }

  49. window.onload=initAll

  50. </script>

  51. <divid="sDiv0">*</div>

  52. <divid="sDiv1">*</div>

  53. <divid="sDiv2">*</div>

  54. <divid="sDiv3">*</div>

  55. <divid="sDiv4">*</div>

  56. <divid="sDiv5">*</div>

  57. <divid="sDiv6">*</div>

  58. <divid="sDiv7">*</div>

  59. <divid="sDiv8">*</div>

  60. <divid="sDiv9">*</div>

  61. </body>

  62. </html>

全局按钮

  1. 复制并粘贴下面的JS代码，放到您的网页，可以在<body>和</body>的之间网页的任意位置放置。如果您的网站使用的模板，您也可以复制代码到您的模板，按钮将在所有网页自动出现。

  2. <!-- Baidu Button BEGIN -->

  3. <divid="bdshare"class="bdshare_t bds_tools get-codes-bdshare">

  4. <spanclass="bds_more">分享到：</span>

  5. <aclass="bds_qzone"></a>

  6. <aclass="bds_tsina"></a>

  7. <aclass="bds_tqq"></a>

  8. <aclass="bds_renren"></a>

  9. <aclass="shareCount"></a>

  10. </div>

  11. <scripttype="text/javascript"id="bdshare_js"data="type=tools"></script>

  12. <scripttype="text/javascript"id="bdshell_js"></script>

  13. <scripttype="text/javascript">

  14. document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours();

  15. </script>

  16. <!-- Baidu Button END -->

舞台特效

  1. <html>

  2. <head>

  3. <metahttp-equiv="Content-Type"content="text/html; charset=gb2312">

  4. <title></title>

  5. </head>

  6. <bodylink="#FF00FF">

  7. <bodybgcolor="#000000"link="#FF00FF">

  8. <divid="myLightObject"style="position: relative; height: 100px; width: 400px; top: 10px; left: 10px;

  9. color: White; filter: light">

  10. <palign="center">

  11. <fontsize="6"><ahref="http://www.chinaz.com/">百晓生而已、呵呵

  12. </a></font>

  13. </div>

  14. 百晓生说明：<aid="HotNews"href=""_fcksavedurl=""target="_blank"></a>

  15. <scriptlanguage="javascript">

  16. <!--

  17. var NewsTime = 2000;//每条新闻的停留时间

  18. var TextTime = 50; //新闻标题文字出现等待时间，越小越快

  19. var newsi = 0;

  20. var txti = 0;

  21. var txttimer;

  22. var newstimer;

  23. var newnewstitle = new Array();//新闻标题

  24. var newnewshref = new Array(); //新闻链接

  25. newstitle[0] = "关于百晓生，大家都比较熟的了、呵呵，如果有想了解 的就直接去我的暂住小站哈，http://infodown.tap.cn，欢迎来访，欢迎 留言";

  26. newshref[0] = "http://infodown.tap.cn";

  27. function shownew()

  28. {

  29. var endstr = "_"

  30. hwnewstr = newstitle[newsi];

  31. newslink = newshref[newsi];

  32. if(txti==(hwnewstr.length-1)){endstr="";}

  33. if(txti>=hwnewstr.length){

  34. clearInterval(txttimer);

  35. clearInterval(newstimer);

  36. newsi++;

  37. if(newsi>=newstitle.length){

  38. newsi = 0

  39. }

  40. newstimer = setInterval("shownew()",NewsTime);

  41. txti = 0;

  42. return;

  43. }

  44. clearInterval(txttimer);

  45. document.getElementById("HotNews").href=newslink;

  46. document.getElementById("HotNews").innerHTML =  hwnewstr.substring(0,txti+1)+endstr;

  47. txti++;

  48. txttimer = setInterval("shownew()",TextTime);

  49. }

  50. shownew();

  51. //-->

  52. </script>

  53. <scriptlanguage="VBScript">

  54. Option Explicit

  55. sub window_OnLoad()

  56. call myLightObject.filters.light(0).addambient(0,0,255,30)

  57. call myLightObject.filters.light(0).addcone(400,400,200,100,100,200,204,200,80,10)

  58. end sub

  59. sub document_onMouseMove()

  60. call myLightObject.filters.light(0).MoveLight(1,window.event.x,window.event.y,0,1)

  61. end sub

  62. </script>

  63. </body>

  64. </html>

星星飞舞

  1. <html>

  2. <head>

  3. </head>

  4. <body>

  5. <SCRIPTLANGUAGE="JavaScript1.2">

  6. var intervals=2000

  7. var sparksOn     = true;

  8. var speed        = 40;

  9. var power        = 3;

  10. var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0

  11. var ns=(document.layers);

  12. var ie=(document.all);

  13. var ns6=(document.getElementById&&!document.all);

  14. var sparksAflyin = false;

  15. var allDivs      = new Array(10);

  16. var totalSparks  = 0;

  17. function initAll(){

  18. if(!ns && !ie &&!ns6){

  19. sparksOn = false;

  20. return;

  21. }

  22. setInterval("firework()",intervals)

  23. if (ns)

  24. document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);

  25. for(dNum=0; dNum<7; ++dNum){

  26. if(ie)

  27. allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');

  28. else if (ns6)

  29. allDivs[dNum]=document.getElementById('sDiv'+dNum).style;

  30. else

  31. allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');

  32. }

  33. }

  34. function firework(){

  35. if (ie){

  36. documentdocumentWidth=document.body.clientWidth

  37. documentdocumentHeight=document.body.clientHeight

  38. leftcorner=document.body.scrollLeft

  39. topcorner=document.body.scrollTop

  40. }

  41. else if (ns||ns6){

  42. documentWidth=window.innerWidth

  43. documentHeight=window.innerHeight

  44. leftcorner=pageXOffset

  45. topcorner=pageYOffset

  46. }

  47. randomx=leftcorner+Math.floor(Math.random()*documentWidth)

  48. randomy=topcorner+Math.floor(Math.random()*documentHeight)

  49. if(sparksOn){

  50. if(!sparksAflyin){

  51. sparksAflyin=true;

  52. totalSparks=0;

  53. for(var spark=0;spark<=6;spark++){

  54. dx=Math.round(Math.random()*50);

  55. dy=Math.round(Math.random()*50);

  56. moveTo(spark,randomx,randomy,dx,dy);

  57. }

  58. }

  59. }

  60. }

  61. function moveTo(I,tempx,tempy,dx,dy){

  62. if(ie){

  63. if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))

  64. tempy=document.body.offsetHeight+document.body.scrollTop-80;

  65. if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))

  66. tempx=document.body.offsetWidth+document.body.scrollLeft-80;

  67. }

  68. else if(ns6){

  69. if(tempy+80>(window.innerHeight+pageYOffset))

  70. tempy=window.innerHeight+pageYOffset-80;

  71. if(tempx+80>(window.innerWidth+pageXOffset))

  72. tempx=window.innerWidth+pageXOffset-80;

  73. }

  74. if(tempx>-50&&tempy>-50){

  75. tempx+=dx;tempy+=dy;

  76. allDivs[I].left=tempx;

  77. allDivs[I].top=tempy;

  78. dx-=power;dy-=power;

  79. setTimeout("moveTo("+I+","+tempx+","+tempy+","+dx+","+dy+")",speed)

  80. }

  81. else

  82. ++totalSparks

  83. if(totalSparks==7){

  84. sparksAflyin=false;

  85. totalSparks=0;

  86. }

  87. }

  88. window.onload=initAll

  89. </script>

  90. <style>

  91. #sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}

  92. #sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}

  93. #sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}

  94. #sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;}

  95. #sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}

  96. #sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}

  97. #sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}

  98. </style>

  99. <bodybgcolor="#000000">

  100. <divid="sDiv0">*</div>

  101. <divid="sDiv1">*</div>

  102. <divid="sDiv2">*</div>

  103. <divid="sDiv3">*</div>

  104. <divid="sDiv4">*</div>

  105. <divid="sDiv5">*</div>

  106. <divid="sDiv6">*</div>

  107. </body>

  108. </html>

跟随鼠标的日期时间表盘

  1. <html>

  2. <head>

  3. <title>跟随鼠标的日期时间表盘</title>

  4. </head><BODY>

  5. <!--将以下代码加入HTML的<Body></Body>之间-->

  6. <SCRIPTlanguage=JavaScript>

  7. <!--

  8. dCol="0000FF"

  9. fCol="FF0000"

  10. sCol="00FF00"

  11. mCol="000000"

  12. hCol="000000"

  13. ClockHeight=40;

  14. ClockWidth=40;

  15. ClockFromMouseY=0;

  16. ClockFromMouseX=100;

  17. d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

  18. m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

  19. date=new Date();

  20. day=date.getDate();

  21. year=date.getYear();

  22. if (year <2000) yearyear=year+1900;

  23. TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year;

  24. D=TodaysDate.split('');

  25. H='...';

  26. HH=H.split('');

  27. M='....';

  28. MM=M.split('');

  29. S='.....';

  30. SS=S.split('');

  31. Face='1 2 3 4 5 6 7 8 9 10 11 12';

  32. font='Arial';

  33. size=1;

  34. speed=0.6;

  35. ns=(document.layers);

  36. ie=(document.all);

  37. FaceFace=Face.split(' ');

  38. n=Face.length;

  39. a=size*10;

  40. ymouse=0;

  41. xmouse=0;

  42. scrll=0;

  43. props="<font face="+font+" size="+size+"color="+fCol+">";

  44. props2="<font face="+font+" size="+size+"color="+dCol+">";

  45. Split=360/n;

  46. Dsplit=360/D.length;

  47. HandHeight=ClockHeight/4.5

  48. HandWidth=ClockWidth/4.5

  49. HandY=-7;

  50. HandX=-2.5;

  51. scrll=0;

  52. step=0.06;

  53. currStep=0;

  54. y=new Array();x=new Array();Y=new Array();X=new Array();

  55. for (i=0; i <n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}

  56. Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

  57. for (i=0; i <D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}

  58. if (ns){

  59. for (i=0; i <D.length; i++)

  60. document.write('<layername="nsDate'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props2+D[i]+'</font></center></layer>');

  61. for (i=0; i <n; i++)

  62. document.write('<layername="nsFace'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props+Face[i]+'</font></center></layer>');

  63. for (i=0; i <S.length; i++)

  64. document.write('<layername=nsSeconds'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');

  65. for (i=0; i <M.length; i++)

  66. document.write('<layername=nsMinutes'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');

  67. for (i=0; i <H.length; i++)

  68. document.write('<layername=nsHours'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');

  69. }

  70. if (ie){

  71. document.write('<divid="Od"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');

  72. for (i=0; i <D.length; i++)

  73. document.write('<divid="ieDate"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');

  74. document.write('</div></div>');

  75. document.write('<divid="Of"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');

  76. for (i=0; i <n; i++)

  77. document.write('<divid="ieFace"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');

  78. document.write('</div></div>');

  79. document.write('<divid="Oh"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');

  80. for (i=0; i <H.length; i++)

  81. document.write('<divid="ieHours"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');

  82. document.write('</div></div>');

  83. document.write('<divid="Om"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');

  84. for (i=0; i <M.length; i++)

  85. document.write('<divid="ieMinutes"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');

  86. document.write('</div></div>')

  87. document.write('<divid="Os"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">');

  88. for (i=0; i <S.length; i++)

  89. document.write('<divid="ieSeconds"style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');

  90. document.write('</div></div>')

  91. }

  92. (ns)?window.captureEvents(Event.MOUSEMOVE):0;

  93. function Mouse(evnt){

  94. ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;

  95. xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;

  96. }

  97. (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

  98. function ClockAndAssign(){

  99. time = new Date ();

  100. secs = time.getSeconds();

  101. sec = -1.57 + Math.PI * secs/30;

  102. mins = time.getMinutes();

  103. min = -1.57 + Math.PI * mins/30;

  104. hr = time.getHours();

  105. hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;

  106. if (ie){

  107. Od.style.top=window.document.body.scrollTop;

  108. Of.style.top=window.document.body.scrollTop;

  109. Oh.style.top=window.document.body.scrollTop;

  110. Om.style.top=window.document.body.scrollTop;

  111. Os.style.top=window.document.body.scrollTop;

  112. }

  113. for (i=0; i <n; i++){

  114. var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;

  115. F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;

  116. F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

  117. }

  118. for (i=0; i <H.length; i++){

  119. var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;

  120. HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;

  121. HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);

  122. }

  123. for (i=0; i <M.length; i++){

  124. var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;

  125. ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;

  126. ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);

  127. }

  128. for (i=0; i <S.length; i++){

  129. var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;

  130. SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;

  131. SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);

  132. }

  133. for (i=0; i <D.length; i++){

  134. var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;

  135. DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;

  136. DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);

  137. }

  138. currStep-=step;

  139. }

  140. function Delay(){

  141. scrll=(ns)?window.pageYOffset:0;

  142. Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

  143. Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

  144. for (i=1; i <D.length; i++){

  145. Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);

  146. Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);

  147. }

  148. y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

  149. x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

  150. for (i=1; i <n; i++){

  151. y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

  152. x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

  153. }

  154. ClockAndAssign();

  155. setTimeout('Delay()',40);

  156. }

  157. if (ns||ie)window.onload=Delay;

  158. //-->

  159. </SCRIPT>

  160. </body></html>

本文出自 “成鹏致远” 博客，请务必保留此出处http://infohacker.blog.51cto.com/6751239/1171462