html鼠标特效代码,html鼠标特效,10个经典的网页鼠标特效代码

小编为广大读者们整理了10个经典的网页鼠标特效代码，并对代码进行了编译和解释，需要的朋友收藏下吧。

1、鼠标指向出现实用特殊提示

！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。 DTD

html xmlns= http://。w3。 org/1999/XHTML

头

meta http-equiv= Content-Type Content= text/html；charset=utf-8 /

meta http-equiv= Content-Language Content= zh-CN /

标题钢性铸铁打造鼠标触发效果/标题

style type=text/css

！-

正文{

边距：0;

填充：0;

颜色：# 000;

字体大小：12px

行高：160%;

文本对齐：左对齐；

身高：100%;

字体系列：宋体、Tahoma、arial、verdana、sans-serif、‘Lucida Grande’、‘Lucida Sans Unicode’；

}

*{边距：0;填充：0;}

h2，h2 a:链接，h2 a:悬停，h2 a:已访问{

字体大小：14px

文字-装饰：无；

颜色：# 000000;

}。千瓦_自{

填充：20像素0 0像素

边距：自动；

高度：300像素

溢出：隐藏；

宽度：650像素

}。kw_from .sbtn{

浮动：左；

宽度：80px

填充：16px 0 0

}。kw_from .searchMore{

浮动：左；

宽度：80px

填充：4px

}

#searchNav {

宽度：430像素

浮动：左；

}

#searchNav #conter1，#searchNav #conter3{

浮动：左；

宽度：250像素

}

#搜索导航#内容2,#搜索导航#内容4{

浮动：左；

宽度：180像素

}

#searchNav ul {

填充：0;

边距：0;

列表样式：无；

}

#searchNav li {

浮动：左；

}

#searchNav li ul {

显示：无；

top:20px；

}

#搜索导航李：悬停ul，#searchNav li.over ul {

显示：块；

浮动：左；

}

#阿利搜索导航{

浮动：左；

显示：块；

字体大小：12px

填充：3px

文字-装饰：无；

颜色：# 777;

}

#阿利搜索导航：悬停{

背景色：# f4f4f4

}

#searchNav #jobKw{

宽度：220像素

高度：18px

}

#searchNav #cityKw{

宽度：130像素

高度：18px

}

/风格

脚本类型=文本/javascript

！- //- ![CDATA[//

！-

startList=function() {

如果(文档。所有文档。getelementbyid){

导航根=文档。getelementbyid(“搜索导航”)；

for(I=0；inavroot。子节点。长度；i ) {

节点=导航根。子节点[I]；

if (node.nodeName==LI) {

node.onmouseover=function() {

这个。class name=" over

}

node.onmouseout=function() {

这个。类名=this。类名。替换( over ， )；

}

window.onload=startList

//- !]]

/脚本

/头

身体

div class=kw_from

表单action=/search。 html method= get name= search form id= search form on submit= return check()

ul id=searchNav

李id=内容1h2找什么/h2

输入id= jobKw name= jobKw type= text /

ul id=conter3

lia href=# rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部“不跟随”会计/a/李

lispan class= more city a href= # rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随更多gt； gt；/a/span/li

/ul

/李

li id=conter2h2在那里/h2

输入id=城市千瓦 name=城市千瓦 type= text /

ul id=conter4

/ul

/李

/ul

div class=sbtn

input name= submit type= submit class= BTN 4 style= margin:0px 15px 2px 0；值=搜索工作 /

/div

div class=searchMore

a href= search _ expert。html rel=外部无跟随高级搜索/ABR/a href= search _ sort。html rel=外部无跟随分类搜索/a /div

/表单

/div

/body

/html

2、跟随鼠标的流星

超文本标记语言

头

标题网页特效-跟随鼠标的流星/标题

meta content= text/html；charset=GB 2312 http-equiv= Content-Type

/头

body bgColor=#000000

脚本语言=JavaScript

！-

Clrs=新数组( ff0000 ， 00ff00 ， ffffff ， ff00ff ， ffa500 ， ffff00 ， 00ff00 ， ffffff ， ff00ff )

定义变量速度=1;

var RunTime=0；

var cntr=0；

var xcntr=100

var Nslayers

定义变量脉冲=25;

var onClrs

var Xpos=421

var Ypos=231

var _ y；

if (document.layers){

window.captureEvents(事件MOUSEMOVE)；

函数xFollowMouse(evnt){

Xpos=evnt.pageX

Ypos=evnt.pageY

}

窗户。onmousemove=xfollow mouse

文档。write( layer name= A0 left=10 top=10 bgcolor= # ff 0000 clip= 0，0，2，2/layer

layer name= a1 left=10 top=10 bgcolor= # 00ff 00 clip= 0，0，2，2/layer

layer name= a2 left=10 top=10 bgcolor= # ffffff clip= 0，0，2，2/layer

layer name= a3 left=10 top=10 bgcolor= # FFA 500 clip= 0，0，2，2/layer

layer name= a4 left=10 top=10 bgcolor= # ff 00 ff clip= 0，0，2，2/layer

layer name= a5 left=10 top=10 bgcolor= # 8888 ff clip= 0，0，2，2/layer

layer name= a6 left=10 top=10 bgcolor= # fff 000 clip= 0，0，2，2 /layer )；

}

else if (document.all){

函数FollowMouse(){

xpos=文档。身体。向左滚动事件。x；

ypos=文档。身体。滚动顶部事件。y；

}

文档。onmousemove=跟随鼠标；

文档。write( div id= ieDiv style= position:absolute；top:0px；左：0px

div id= c style= position:relative

div style= position:absolute；top:0px；左：0px宽度：2px高度：2px背景：# ff0000font-size:2px/div

div style= position:absolute；top:0px；左：0px宽度：2px高度：2px背景：# 00ff00font-size:2px/div

div style= position:absolute；top:0px；左：0px宽度：2px高度：2px背景：# fffffffont-size:2px/div

div style= position:absolute；top:0px；左：0px宽度：2px高度：2px背景：# ffa500font-size:2px/div

div style= position:absolute；top:0px；左：0px宽度：2px高度：2px背景：# ff 00 fffont-size:2px/div

div style= position:absolute；top:0px；左：0px宽度：2px高度：2px背景：# 8888fffont-size:2px/div

div style= position:absolute；top:0px；左：0px宽度：2px高度：2px背景：# fff000font-size:2px/div

/div

/div’)；

}

函数sv2(){

if (document.layers){

for(I=0；i7；我)

{

nslayers= a I；

document.layers[0].top=Ypos cntr*Math.cos((运行时I * 4.5)/5)；

document.layers[0].left=Xpos cntr*Math.sin((运行时I * 4.5)/5)；

var rand col=数学。圆(数学。random()* 8)；

document.layers[0].bgColor=Clrs[rand col]；

}

cntr=1；

运行时间=速度；

stp=setTimeout(sv2()，10)；

如果（计数器=100)

{

cntr=100

速度=2.5;

for(I=0；i7；我)

{

nslayers= a I；

document.layers[Nslayers].top=Ypos cntr*Math.cos((运行时-100)* I/90)；

document.layers[Nslayers].left=Xpos cntr*Math.sin((运行时-100)* I/90)；

}

如果(运行时间182)

{

速度=0.5;

for(I=0；i7；我)

{

nslayers= a I；

document.layers[Nslayers].top=Ypos xcntr*Math.cos((运行时-182) i*4.5)/5)*Math.cos((运行时-182)/5);

document.layers[Nslayers].left=Xpos xcntr * math。sin((RunTime-182)I * 4.5)/5)；

}

else if (document.all){

for(I=0；iie部门。全部。c .所有。长度；我)

{

var rand col=数学。圆(数学。random()* 8)；

iediv。全部。c .所有[0]。风格。background=Clrs[rand col]；

iediv。全部。c .所有[0]。风格。top=Ypos cntr *数学。cos((运行时I * 4.5)/5)；

iediv。全部。c .所有[0]。风格。left=Xpos cntr * math。罪恶(运行时I * 4.5)/5)；

}

cntr=1；

运行时间=速度；

window.status=运行库

stp=setTimeout(sv2()，10)；

如果（计数器=100)

{

cntr=100

速度=2.5;

for(I=0；iie部门。全部。c .所有。长度；我)

{

iediv。全部。c .所有[我]。风格。top=Ypos cntr *数学。cos((运行时-100)* I/90)；

iediv。全部。c .所有[我]。风格。left=Xpos cntr * math。sin((运行时-100)* I/90)；

}

如果(运行时间182)

{

速度=0.5;

for(I=0；iie部门。全部。c .所有。长度；我)

{

iediv。全部。c .所有[我]。风格。top=Ypos xcntr * math。cos((运行时-182) i*4.5)/5)*Math.cos((运行时-182)/5);

iediv。全部。c .所有[我]。风格。left=Xpos xcntr * math。sin((RunTime-182)I * 4.5)/5)；

}

如果(运行时间210)

{

xcntr-=10；

}

如果(文档。图层)

_ y=-窗口。内宽-90；

else if (document.all)

_ y=-文档。身体。客户端宽度-90；

if (xcntr=_y)

{

运行时=0;

速度=1;

cntr=0；

xcntr=100

}

sv2()

//-

/脚本

/body

/html

3、跟随鼠标的三色彩带

超文本标记语言

头

标题网页特效-很酷的跟随鼠标的三色彩带/标题

/床头板bgColor=#000000

！-将以下代码加入超文本标记语言的身体/身体之间-

脚本语言=JavaScript

！-

var a _ Colour= fff000

var b _ Colour= 00ff00

var c _ Colour= ff00ff

var Size=120

var YDummy=new Array()，XDummy=new Array()，xpos=0，ypos=0，这一步=0；步长=0.6;

if (document.layers){

window.captureEvents(事件MOUSEMOVE)；

函数nsMouse(evnt){

xpos=窗口。页面偏移事件。pagex 6；

ypos=窗口。页面偏移事件。pagey 16

}

window.onMouseMove=nsMouse

}

else if (document.all)

{

函数ieMouse(){

xpos=文档。身体。向左滚动事件。x 6；

ypos=文档。身体。滚动顶部事件。y 16

}

document.onmousemove=ieMouse

}

函数漩涡(){

for(I=0；i3；我)

{

YDummy[I]=ypos大小*数学。sin((1 *数学。sin((这一步)/10))I * 2)*数学。sin((这一步)/4)；

xdument[I]=xpos大小*数学。cos((1 *数学。sin((这一步)/10))I * 2)*数学。sin((这一步)/4)；

}

这一步=一步

setTimeout(swirl()，10)；

}

定义变量金额=10;

if (document.layers){

for(I=0；一、金额；我)

{

文档。写( layer name=NSA I top=0 left=0 width= I/2 height= I/2 bgcolor= a _ Colour /layer))；

文档。write( layer name=nsb I top=0 left=0 width= I/2 height= I/2 bgcolor= b _ Colour /layer))；

文档。write( layer name=NSC I top=0 left=0 width= I/2 height= I/2 bgcolor= c _ Colour /layer))；

}

else if (document.all){

文档。write( div id= ODiv style= position:absolute；top:0px；左：0px

div id= IDiv style= position:relative )；

for(I=0；一、金额；我)

{

文档。写( div id=x style= position:absolute；top:0px；左：0px宽度：“I/2”；高度： I/2 ；背景： a _ Colour ；font-size: I/2 /div )；

文档。写( div id=y style= position:absolute；top:0px；左：0px宽度：“I/2”；高度： I/2 ；背景： b _ Colour ；font-size: I/2 /div )；

文档。写( div id=z style= position:absolute；top:0px；左：0px宽度：“I/2”；高度： I/2 ；背景： c _ Colour ；font-size: I/2 /div )；

}

文档。write(/div/div )；

}

函数prepos(){

var ntscp=document.layers

var msie=document.all

if (document.layers){

for(I=0；一、金额；我)

{

如果(我数量-1)

{

美国国家安全局top=ntscp[nsa (i 1)].顶；美国国家安全局left=ntscp[nsa (i 1)].左；

ntscp[nsb I].top=ntscp[nsb (i 1)].顶；ntscp[nsb I].left=ntscp[nsb (i 1)].左；

国家安全委员会top=ntscp[nsc (i 1)].顶；国家安全委员会left=ntscp[nsc (i 1)].左；

}

其他

{

美国国家安全局. top=y dummy[0]；美国国家安全局. left=xdu mid[0]；

ntscp[nsb I].top=y假人[1]；ntscp[nsb I].left=xd ument[1]；

国家安全委员会. top=YDummy[2]；国家安全委员会. left=xd ument[2]；

}

else if (document.all){

for(I=0；一、金额；我)

{

如果(我数量-1)

{

msie。x[I]。风格。top=msie。x[I 1]。风格。顶；msie。x[I]。风格。左=msie。x[I 1]。风格。左；

msie。y[I]。风格。top=msie。y[I 1]。风格。顶；msie。y[I]。风格。左=msie。y[I 1]。风格。左；

msie。z[I]。风格。top=msie。z[I 1]。风格。顶；msie。z[I]。风格。左=msie。z[I 1]。风格。左；

}

其他

{

msie。x[I]。风格。top=y dummy[0]；msie。x[I]。风格。left=xdu mid[0]；

msie。y[I]。风格。top=y dummy[1]；msie。y[I]。风格。left=xdu mid[1]；

msie。z[I]。风格。top=YDummy[2]；msie。z[I]。风格。left=xdu mid[2]；

}

setTimeout(prepos()，10)；

}

函数Start(){

漩涡(),前置()

}

window.onload=Start

//-

/脚本

& amp

lt;/body></html>

4、鼠标经过滚动提示文字

<a href="http://www.网址.com" rel="external nofollow" _fcksavedurl="http://www.网址.com" target="_blank" onm ouseOver="helpor_net_show(this,event,网页鼠标特效)" onm ouseOut="helpor_net_hide()">把鼠标放上来试试</a><div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell"><layer name="nstip" width="1000px" bgColor="seashell"></layer></div><SCRIPT language="JavaScript"></SCRIPT>

5、围绕鼠标旋转的三叶空间旋浆

<html><head><title>围绕鼠标旋转的三叶空间旋浆</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><scriptlanguage="JavaScript"></script><script language="JavaScript"></script></body></html>

6、围绕鼠标的立体星环（摩天轮）

<html><head><title>围绕鼠标的立体星环</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><script language="JavaScript"></script></head><body bgcolor="#000000"></body></html>

7、围绕鼠标的立体旋转文字

<html><head><title>围绕鼠标的立体旋转文字</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><meta content="Microsoft FrontPage 5.0" name="GENERATOR"></head><body><script LANGUAGE="JavaScript"></script></body></html>

8、跟随鼠标的日期时间表盘

<html><head><title>跟随鼠标的日期时间表盘</title></head><BODY><SCRIPT language=JavaScript></SCRIPT></body></html>

9、很有特色的荧光鼠标

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>很有特色的荧光鼠标</title><meta name="GENERATOR" content="Microsoft FrontPage 5.0"></head><body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000"><divid="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52"><dd><div align="right"><img src="images/light.gif" width="29" height="30">　</div></dd></div><p align="center"><b><font size="5">日落大道上的亚洲男孩 </font></b></p><table border="0" width="100%"><tr><td width="82%"><font face="宋体" color="#FF00FF" style="font-size: 9pt"></font><span style="font-size: 9pt">人人爱谈张爱玲，尤其在论及服饰的时候。我不能免俗，也来附庸风雅一番。张爱玲纪念文集提到她逝世时的寓所，地址非常眼熟，后来才知道那公寓就在UCLA正门附近。我和朋友好奇心起，课后前去朝圣一番，发现果真就是文集照片中的公寓，只不过屋前绿树茁壮更胜以往，和目前公寓的灰暗色调形成讽刺对比。耳闻张爱玲生前喜欢在UCLA附近不时搬迁，居无定所，像一头中枪后逃逸的狐狸，不停回头将沿路滴落的血迹舐去，以免猎人循迹跟上。　<br><br>　　我以刚出道的猎人口吻说∶传言中张的住所很狼狈，她的衣物都随便搁在纸箱或超级市场收集来的塑胶袋里唷。　<br><br>　　比我早来洛杉矶数年的同行朋友却说∶有何奇怪？我的衣物书籍也都塞在纸箱和塑胶袋里。搬家的时候反而方便啊。　<br><br>　　朋友的粗廉生活让我很不以为然；当时我才初抵美国未久。　<br><br>　　试想，任何华丽的衣裳只要一落进超级市场塑胶袋，看起来就像垃圾。把生活尽数装在塑胶袋里，岂不是将自己完全垃圾化？　<br><br>　　但，在开始租屋、收集家具之后，我也开始世故驯化。留学生余钱无多，时常面临搬家压力。因此，我很少购衣；如要花钱，选择并不多。　<br><br>　　从UCLA门口驱车南行，经过张爱玲故居，就来到了”ROSS“成衣批发店。ROSS陈列满坑满谷的名牌服饰，但因都是瑕疵品，比如说胸口的商标掉到肚脐位置的马球衫之类，张冠李戴，品质荒唐，所以售价低廉。许多经济能力较差的黑人和墨西哥人就来这里翻索便宜的CK、耐吉、DKNY；我加入他们肤色鲜艳的行列，结帐时将微疵的战利品装在塑胶袋里－而非百货公司的雅痞纸袋。说不定当年张爱玲也曾经蹋著脸徒步到这里找便宜货，混迹各色人种之间，没有人认出她何许人也。　<br><br>　　虽然每次光顾ROSS都省了钱，而且享受与有色人种站在同一阵线的政治正确虚荣感，但每一次的经验都极其卑微沮丧。好莱坞电影中，彩色画报里，那种昂首阔步走进香蕉共和国的潇洒意象，在现实美国里却好遥远。还是认份光顾量贩店，站在平庸空间里排队，细细咀嚼外国人的贫穷滋味。　<br><br>　　时装海报里，那些空灵的躯干之间，并没有留下什么空位给我者。　<br><br>　　在日落大道两岸，巨幅时装广告海报一张张浮悬空中，像敦煌壁画，海报里俊男美女睥睨众生，佛似的自在庄严，日落大道一如当代加　<br><br>　　州的丝路。AF，Abercrombie　＆　Fitch的白人男孩在阳光下微笑展示金身，好生慈悲。我猜美国当前年轻男性最风靡的服饰品牌之一大概就是AF，青春的傲慢包装成若无其事的天真潇洒。难怪校园里穿AF的大男孩比比皆是（怪的是，任何人穿了AF就会变得性感）；许多男同志也表示，看了AF男孩就会流口水（许多人在徵友广告中表明，想要找AF风格的男孩）。记得春天清晨我行过波士顿哈佛大学，赫然发现哈佛广场前最招摇的海报就来自AF，金发男孩的美丽笑脸占据了整个橱窗，诡异的意象。光是一张笑脸就比一家书店还要庞大。我望之却步了。　<br><br>　　</span></td></tr></table><script language="vbscript">dim red,gre,bludim x,y,zred=255gre=255blu=0z=100sub window_onload()call mybody.filters.light.addPoint(0,0,z,Red,Gre,Blu,100)mybody.style.cursor="hand"end subsub document_onmousemove()x=window.event.xy=window.event.ycall mybody.filters.Light.MoveLight(0, x, y, 100, 1)end sub</script><script language="javascript">//这是使图层移动的函数function move_layer(){Layer1.style.left=event.clientX+document.body.scrollLeft-50;Layer1.style.top=event.clientY+document.body.scrollTop-20;}//这里的意思是，如果鼠标移动时就调用"move_layer"函数document.onmousemove =move_layer;</script></body></html>

10、跟随鼠标的幻影文字

<html><head><title>中国站长站--跟随鼠标的幻影文字</title></head><body><script LANGUAGE="JavaScript"></script></body></html>

html鼠标特效代码,html鼠标特效,10个经典的网页鼠标特效代码