html鼠标特效代码,html鼠标特效

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='内容1'h2找什么/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='conter2'h2在那里/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" onMouseOver="helpor_net_show(this,event,'网页鼠标特效')" onMouseOut="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"> <script language="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"> <div id="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"> 人人爱谈张爱玲，尤其在论及服饰的时候。我不能免俗，也来附庸风雅一番。张爱玲纪念文集提到她逝世时的寓所，地址非常眼熟，后来才知道那公寓就在UC LA正门附近。我和朋友好奇心起，课后前去朝圣一番，发现果真就是文集照片中的公寓，只不过屋前绿树茁壮更胜以往，和目前公寓的灰暗色调形成讽刺对比。耳闻张爱玲生前喜欢在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,blu dim x,y,z red=255 gre=255 blu=0 z=100 sub window_onload() call mybody.filters.light.addPoint(0,0,z,Red,Gre,Blu,100) mybody.style.cursor="hand" end sub sub document_onmousemove() x=window.event.x y=window.event.y call 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>

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读