zoukankan      html  css  js  c++  java

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

    小续

    还记得当初和八哥一起制作百家成员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; 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; 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; 1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}

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

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

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

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

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

    97. #sDiv6 {position:absolute; height:1; 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+';'+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+';'+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;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;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;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
  • 相关阅读:
    Eclipse下载
    RTT之AT命令组件
    RTT之shell
    RTT之内存管理及异常中断
    单片机的图形UI
    RTT学习
    RTT学习之线程管理
    C++学习笔记：
    运放
    关于KEIL下的图形化显示和输出问题
  • 原文地址：https://www.cnblogs.com/lcw/p/3159436.html
Copyright © 2011-2022 走看看