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

2024-11-20 技术教程

小续

还记得当初和八哥一起制作百家成员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>的之间网页的任意位置放置。如果您的网站使用的模板，您也可以复制代码到您的模板，按钮将在所有网页自动出现。

<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>

舞台特效

<html>

<head>

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

</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>

<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>

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

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

热门

最新文章

随机文章

TAGS标签

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

相关推荐

相关推荐

热门

最新文章

随机文章

TAGS标签