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

原创

infohacker 2013-04-05 14:35:13 ©著作权

文章标签 html 特效 mystery 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者infohacker的原创作品，请联系作者获取转载授权，否则将追究法律责任

小续

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

html特效代码（一）

html特效代码（二）

3D相册代码

<embed
src="http://flash.picturetrail.com/pflicks/acrobatcube_r.swf"
loop="false"quality="high"
FlashVars="backopacity=100&cubecroptofit=1&enlargecroptofit=0& 
logopath=http://flash.picturetrail.com/pflicks/ptlogo1.swf 
&ptdim=50.10&ptxy=180.16&faceopacity=80
&img1=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244048256.jpg 
&img2=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043049.jpg 
&img3=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043047.jpg 
&img4=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043044.jpg 
&img5=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043042.jpg 
&img6=http://pic40.picturetrail.com:80/VOL380/8620317/15986960/244043040.jpg" 
wmode="transparent"bgcolor="transparent"
width="180"height="160"
name="acrobatcube"id="acrobatcube"align="middle"allowScriptAccess="sameDomain"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

斗转星移

<html>
<head>
</head>
<body>
<styletype="text/css">
#sDiv0, #sDiv1, #sDiv2, #sDiv3, #sDiv4, #sDiv5, #sDiv6, #sDiv7, #sDiv8, #sDiv9 
{ 
position:absolute; height:1; width:1; font-family:arial black; font-size:9px; color:#FFFFAA; z-index:10; 
} 
</style>
<bodybgcolor="#000000">
<SCRIPTLANGUAGE="JavaScript1.2">
var ns=(document.layers); 
var ie=(document.all); 
var w3=(document.getElementById && self.innerWidth && (window.pageXOffset>-1)); 
var allDivs      = new Array(10); 
var documentWidth,documentHeight; 
function initAll(){ 
if(!ns && !ie && !w3)        return; 
for(dNum=0; dNum<10; ++dNum){ 
if(ie)                allDivs[dNum]=eval（'document.all.sDiv'+dNum+'.style'); 
else if(ns)        allDivs[dNum]=eval（'document.layers["sDiv'+dNum+'"]'); 
else if(w3)        allDivs[dNum]=eval（'document.getElementById("sDiv'+dNum+'").style'); 
moveTo(dNum,0,0); 
} 
} 
function moveTo(I,tempx,tempy){ 
if (ie){ 
documentdocumentWidth  =document.body.offsetWidth+document.body.scrollLeft-20; 
randomy=Math.floor(Math.random()*document.body.offsetHeight)+document.body.scrollTop-20; 
} 
else if (ns){ 
documentWidth=window.innerWidth+window.pageXOffset-20; 
randomy=Math.floor(Math.random()*window.innerHeight)+window.pageYOffset-20; 
} 
else if (w3){ 
documentWidth=self.innerWidth+window.pageXOffset-20; 
randomy=Math.floor(Math.random()*self.innerHeight)+window.pageYOffset-20; 
} 
if(tempx>-50){ 
tempx-=45; 
allDivs[I].left=tempx; 
allDivs[I].top =tempy; 
setTimeout("moveTo("+I+","+tempx+","+tempy+")",40) 
} 
else 
setTimeout("moveTo("+I+",documentWidth-10,randomy)",2000/I+40); 
} 
window.onload=initAll
</script>
<divid="sDiv0">*</div>
<divid="sDiv1">*</div>
<divid="sDiv2">*</div>
<divid="sDiv3">*</div>
<divid="sDiv4">*</div>
<divid="sDiv5">*</div>
<divid="sDiv6">*</div>
<divid="sDiv7">*</div>
<divid="sDiv8">*</div>
<divid="sDiv9">*</div>
</body>
</html>

全局按钮

复制并粘贴下面的JS代码，放到您的网页，可以在<body>和</body>的之间网页的任意位置放置。如果您的网站使用的模板，您也可以复制代码到您的模板，按钮将在所有网页自动出现。 
<!-- Baidu Button BEGIN -->
<divid="bdshare"class="bdshare_t bds_tools get-codes-bdshare">
<spanclass="bds_more">分享到：</span>
<aclass="bds_qzone"></a>
<aclass="bds_tsina"></a>
<aclass="bds_tqq"></a>
<aclass="bds_renren"></a>
<aclass="shareCount"></a>
</div>
<scripttype="text/javascript"id="bdshare_js"data="type=tools"></script>
<scripttype="text/javascript"id="bdshell_js"></script>
<scripttype="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours(); 
</script>
<!-- Baidu Button END -->

舞台特效

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title></title>
</head>
<bodylink="#FF00FF">
<bodybgcolor="#000000"link="#FF00FF">
<divid="myLightObject"style="position: relative; height: 100px; width: 400px; top: 10px; left: 10px; 
color: White; filter: light">
<palign="center">
<fontsize="6"><ahref="http://www.chinaz.com/">百晓生而已、呵呵 
</a></font>
</div>
百晓生说明：<aid="HotNews"href=""_fcksavedurl=""target="_blank"></a>
<scriptlanguage="javascript">
<!-- 
var NewsTime = 2000;//每条新闻的停留时间 
var TextTime = 50; //新闻标题文字出现等待时间，越小越快 
var newsi = 0; 
var txti = 0; 
var txttimer; 
var newstimer; 
var newnewstitle = new Array();//新闻标题 
var newnewshref = new Array(); //新闻链接 
newstitle[0] = "关于百晓生，大家都比较熟的了、呵呵，如果有想了解 的就直接去我的暂住小站哈，http://infodown.tap.cn，欢迎来访，欢迎 留言"; 
newshref[0] = "http://infodown.tap.cn"; 
function shownew() 
{ 
var endstr = "_"
hwnewstr = newstitle[newsi]; 
newslink = newshref[newsi]; 
if(txti==(hwnewstr.length-1)){endstr="";} 
if(txti>=hwnewstr.length){ 
clearInterval(txttimer); 
clearInterval(newstimer); 
newsi++; 
if(newsi>=newstitle.length){ 
newsi = 0
} 
newstimer = setInterval("shownew()",NewsTime); 
txti = 0; 
return; 
} 
clearInterval(txttimer); 
document.getElementById("HotNews").href=newslink; 
document.getElementById("HotNews").innerHTML =  hwnewstr.substring(0,txti+1)+endstr; 
txti++; 
txttimer = setInterval("shownew()",TextTime); 
} 
shownew(); 
//-->
</script>
<scriptlanguage="VBScript">
Option Explicit 
sub window_OnLoad() 
call myLightObject.filters.light(0).addambient(0,0,255,30) 
call myLightObject.filters.light(0).addcone(400,400,200,100,100,200,204,200,80,10) 
end sub 
sub document_onMouseMove() 
call myLightObject.filters.light(0).MoveLight(1,window.event.x,window.event.y,0,1) 
end sub 
</script>
</body>
</html>

星星飞舞

<html>
<head>
</head>
<body>
<SCRIPTLANGUAGE="JavaScript1.2">
var intervals=2000
var sparksOn     = true; 
var speed        = 40; 
var power        = 3; 
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0 
var ns=(document.layers); 
var ie=(document.all); 
var ns6=(document.getElementById&&!document.all); 
var sparksAflyin = false; 
var allDivs      = new Array(10); 
var totalSparks  = 0; 
function initAll(){ 
if(!ns && !ie &&!ns6){ 
sparksOn = false; 
return; 
} 
setInterval("firework()",intervals) 
if (ns) 
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE); 
for(dNum=0; dNum<7; ++dNum){ 
if(ie) 
allDivs[dNum]=eval（'document.all.sDiv'+dNum+'.style'); 
else if (ns6) 
allDivs[dNum]=document.getElementById('sDiv'+dNum).style; 
else 
allDivs[dNum]=eval（'document.layers["sDiv'+dNum+'"]'); 
} 
} 
function firework(){ 
if (ie){ 
documentdocumentWidth=document.body.clientWidth 
documentdocumentHeight=document.body.clientHeight 
leftcorner=document.body.scrollLeft 
topcorner=document.body.scrollTop 
} 
else if (ns||ns6){ 
documentWidth=window.innerWidth 
documentHeight=window.innerHeight 
leftcorner=pageXOffset
topcorner=pageYOffset
} 
randomx=leftcorner+Math.floor(Math.random()*documentWidth) 
randomy=topcorner+Math.floor(Math.random()*documentHeight) 
if(sparksOn){ 
if(!sparksAflyin){ 
sparksAflyin=true; 
totalSparks=0; 
for(var spark=0;spark<=6;spark++){ 
dx=Math.round(Math.random()*50); 
dy=Math.round(Math.random()*50); 
moveTo(spark,randomx,randomy,dx,dy); 
} 
} 
} 
} 
function moveTo(I,tempx,tempy,dx,dy){ 
if(ie){ 
if(tempy+80>(document.body.offsetHeight+document.body.scrollTop)) 
tempy=document.body.offsetHeight+document.body.scrollTop-80; 
if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft)) 
tempx=document.body.offsetWidth+document.body.scrollLeft-80; 
} 
else if(ns6){ 
if(tempy+80>(window.innerHeight+pageYOffset)) 
tempy=window.innerHeight+pageYOffset-80; 
if(tempx+80>(window.innerWidth+pageXOffset)) 
tempx=window.innerWidth+pageXOffset-80; 
} 
if(tempx>-50&&tempy>-50){ 
tempx+=dx;tempy+=dy; 
allDivs[I].left=tempx; 
allDivs[I].top=tempy; 
dx-=power;dy-=power; 
setTimeout("moveTo("+I+","+tempx+","+tempy+","+dx+","+dy+")",speed) 
} 
else 
++totalSparks 
if(totalSparks==7){ 
sparksAflyin=false; 
totalSparks=0; 
} 
} 
window.onload=initAll
</script>
<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;} 
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;} 
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;} 
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;} 
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;} 
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;} 
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;} 
</style>
<bodybgcolor="#000000">
<divid="sDiv0">*</div>
<divid="sDiv1">*</div>
<divid="sDiv2">*</div>
<divid="sDiv3">*</div>
<divid="sDiv4">*</div>
<divid="sDiv5">*</div>
<divid="sDiv6">*</div>
</body>
</html>

跟随鼠标的日期时间表盘

<html>
<head>
<title>跟随鼠标的日期时间表盘</title>
</head><BODY>
<!--将以下代码加入HTML的<Body></Body>之间-->
<SCRIPTlanguage=JavaScript>
<!-- 
dCol="0000FF"
fCol="FF0000"
sCol="00FF00"
mCol="000000"
hCol="000000"
ClockHeight=40; 
ClockWidth=40; 
ClockFromMouseY=0; 
ClockFromMouseX=100; 
d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); 
m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); 
date=new Date(); 
day=date.getDate(); 
year=date.getYear(); 
if (year <2000) yearyear=year+1900; 
TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year; 
D=TodaysDate.split(''); 
H='...'; 
HH=H.split(''); 
M='....'; 
MM=M.split(''); 
S='.....'; 
SS=S.split(''); 
Face='1 2 3 4 5 6 7 8 9 10 11 12'; 
font='Arial'; 
size=1; 
speed=0.6; 
ns=(document.layers); 
ie=(document.all); 
FaceFace=Face.split(' '); 
n=Face.length; 
a=size*10; 
ymouse=0; 
xmouse=0; 
scrll=0; 
props="<font face="+font+" size="+size+"color="+fCol+">"; 
props2="<font face="+font+" size="+size+"color="+dCol+">"; 
Split=360/n; 
Dsplit=360/D.length; 
HandHeight=ClockHeight/4.5 
HandWidth=ClockWidth/4.5 
HandY=-7; 
HandX=-2.5; 
scrll=0; 
step=0.06; 
currStep=0; 
y=new Array();x=new Array();Y=new Array();X=new Array(); 
for (i=0; i <n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0} 
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array(); 
for (i=0; i <D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0} 
if (ns){ 
for (i=0; i <D.length; i++) 
document.write('<layername="nsDate'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props2+D[i]+'</font></center></layer>'); 
for (i=0; i <n; i++) 
document.write('<layername="nsFace'+i+'"top=0left=0height='+a+'width='+a+'><center>'+props+Face[i]+'</font></center></layer>'); 
for (i=0; i <S.length; i++) 
document.write('<layername=nsSeconds'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>'); 
for (i=0; i <M.length; i++) 
document.write('<layername=nsMinutes'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>'); 
for (i=0; i <H.length; i++) 
document.write('<layername=nsHours'+i+'top=0left=0width=15height=15><fontface=Arialsize=3color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>'); 
} 
if (ie){ 
document.write('<divid="Od"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">'); 
for (i=0; i <D.length; i++) 
document.write('<divid="ieDate"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>'); 
document.write('</div></div>'); 
document.write('<divid="Of"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">'); 
for (i=0; i <n; i++) 
document.write('<divid="ieFace"style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>'); 
document.write('</div></div>'); 
document.write('<divid="Oh"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">'); 
for (i=0; i <H.length; i++) 
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>'); 
document.write('</div></div>'); 
document.write('<divid="Om"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">'); 
for (i=0; i <M.length; i++) 
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>'); 
document.write('</div></div>') 
document.write('<divid="Os"style="position:absolute;top:0px;left:0px"><divstyle="position:relative">'); 
for (i=0; i <S.length; i++) 
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>'); 
document.write('</div></div>') 
} 
(ns)?window.captureEvents(Event.MOUSEMOVE):0; 
function Mouse(evnt){ 
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY; 
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX; 
} 
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; 
function ClockAndAssign(){ 
time = new Date (); 
secs = time.getSeconds(); 
sec = -1.57 + Math.PI * secs/30; 
mins = time.getMinutes(); 
min = -1.57 + Math.PI * mins/30; 
hr = time.getHours(); 
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360; 
if (ie){ 
Od.style.top=window.document.body.scrollTop; 
Of.style.top=window.document.body.scrollTop; 
Oh.style.top=window.document.body.scrollTop; 
Om.style.top=window.document.body.scrollTop; 
Os.style.top=window.document.body.scrollTop; 
} 
for (i=0; i <n; i++){ 
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style; 
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll; 
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180); 
} 
for (i=0; i <H.length; i++){ 
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style; 
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll; 
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs); 
} 
for (i=0; i <M.length; i++){ 
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style; 
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll; 
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min); 
} 
for (i=0; i <S.length; i++){ 
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style; 
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll; 
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec); 
} 
for (i=0; i <D.length; i++){ 
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style; 
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; 
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180); 
} 
currStep-=step; 
} 
function Delay(){ 
scrll=(ns)?window.pageYOffset:0; 
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed); 
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed); 
for (i=1; i <D.length; i++){ 
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed); 
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed); 
} 
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); 
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); 
for (i=1; i <n; i++){ 
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); 
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); 
} 
ClockAndAssign(); 
setTimeout('Delay()',40); 
} 
if (ns||ie)window.onload=Delay; 
//-->
</SCRIPT>
</body></html>