天狼星

基于javascript的鼠标悬停效果

2007年1月25日 | 分类: D/XHTML CSS | 标签:

HTML代码

<html> <head> <title>title及alt提示特效</title> <style type="text/css"> body{font-size:12px;color:#000000} td{font-size:12px;color:#000000} a:link{font-size:12px;color:#000000} </style> <script language="javascript"> var pltsPop=null; var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适 var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适 var pltsTitle=""; document.write(‘<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>’); function pltsinits() { document.onmouseover = plts; document.onmousemove = moveToMouseLoc; } function plts() { var o=event.srcElement; if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; pltsPop=o.dypop; if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined") { pltsTipLayer.style.left=-1000; pltsTipLayer.style.display=”; var Msg=pltsPop.replace(/\n/g,"<br>"); Msg=Msg.replace(/\0×13/g,"<br>"); var re=/\{(.[^\{]*)\}/ig; if(!re.test(Msg))pltsTitle="『cnspica』"; else{ re=/\{(.[^\{]*)\}(.*)/ig; pltsTitle=Msg.replace(re,"$1")+" "; re=/\{(.[^\{]*)\}/ig; Msg=Msg.replace(re,""); Msg=Msg.replace("<br>","");} var content = ‘<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">’+ ‘<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖’+pltsTitle+’</p><p id="topright" align="right" style="display:none">’+pltsTitle+’↗</font></b></font></td></tr>’+ ‘<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">’+Msg+’</td></tr>’+ ‘<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙’+pltsTitle+’</p><p id="botright" align="right" style="display:none">’+pltsTitle+’↘</font></b></font></td></tr>’+ ‘</table></td></tr></table>’; pltsTipLayer.innerHTML=content; toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2); moveToMouseLoc(); return true; } else { pltsTipLayer.innerHTML=”; pltsTipLayer.style.display=’none’; return true; } } function moveToMouseLoc() { if(pltsTipLayer.innerHTML==”)return true; var MouseX=event.x; var MouseY=event.y; var popHeight=pltsTipLayer.clientHeight; var popWidth=pltsTipLayer.clientWidth; if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight) { popTopAdjust=-popHeight-pltsoffsetY*1.5; pltsPoptop.style.display="none"; pltsPopbot.style.display=""; } else { popTopAdjust=0; pltsPoptop.style.display=""; pltsPopbot.style.display="none"; } if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth) { popLeftAdjust=-popWidth-pltsoffsetX*2; topleft.style.display="none"; botleft.style.display="none"; topright.style.display=""; botright.style.display=""; } else { popLeftAdjust=0; topleft.style.display=""; botleft.style.display=""; topright.style.display="none"; botright.style.display="none"; } pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust; pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust; return true; } pltsinits(); </script> </head> <body> 链接提示效果：<a href="asdas.htm" title="title及alt提示特效,希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

HTML代码

<head> <script language="javascript"> //***********默认设置定义.********************* tPopWait=50;//停留tWait毫秒后显示提示。 tPopShow=3000;//显示tShow毫秒后关闭提示 showPopStep=20; popOpacity=99; //***************内部变量定义***************** sPop=null; curShow=null; tFadeOut=null; tFadeIn=null; tFadeWaiting=null; document.write("<style type=’text/css’id=’defaultPopStyle’>"); document.write(".cPopText {  background-color: #ffffff; border: 1px #000000 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); document.write("</style>"); document.write("<div id=’zzzpopLayer’ style=’position:absolute;z-index:1000;’ class=’cPopText’></div>"); function showPopupText(){ var o=event.srcElement; MouseX=event.x; MouseY=event.y; if(o.alt!=null && o.alt!=""){o.zzzpop=o.alt;o.alt=""}; if(o.title!=null && o.title!=""){o.zzzpop=o.title;o.title=""}; if(o.zzzpop!=sPop) { sPop=o.zzzpop; clearTimeout(curShow); clearTimeout(tFadeOut); clearTimeout(tFadeIn); clearTimeout(tFadeWaiting); if(sPop==null || sPop=="") { zzzpopLayer.innerHTML=""; zzzpopLayer.style.filter="Alpha()"; zzzpopLayer.filters.Alpha.opacity=0; } else { if(o.dyclass!=null) popStyle=o.dyclass else popStyle="cPopText"; curShow=setTimeout("showIt()",tPopWait); } } } function showIt(){ zzzpopLayer.className=popStyle; zzzpopLayer.innerHTML=sPop; popWidth=zzzpopLayer.clientWidth; popHeight=zzzpopLayer.clientHeight; if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 else popLeftAdjust=0; if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 else popTopAdjust=0; zzzpopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; zzzpopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; zzzpopLayer.style.filter="Alpha(Opacity=0)"; fadeOut(); } function fadeOut(){ if(zzzpopLayer.filters.Alpha.opacity<popOpacity) { zzzpopLayer.filters.Alpha.opacity+=showPopStep; tFadeOut=setTimeout("fadeOut()",1); } else { zzzpopLayer.filters.Alpha.opacity=popOpacity; tFadeWaiting=setTimeout("fadeIn()",tPopShow); } } function fadeIn(){ if(zzzpopLayer.filters.Alpha.opacity>0) { zzzpopLayer.filters.Alpha.opacity-=1; tFadeIn=setTimeout("fadeIn()",1); } } document.onmouseover=showPopupText; </script> </head> <body> <a href="http://www.cnspica.com" title="转自" target="_blank" >www.cnspica.com </a> </body>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

发表评论 | Trackback

目前还没有任何评论.

您必须在登录后才能发布评论.

2012 年二月

一二三四五六日

« 六

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29
分类目录
- AJAX JS
- Android
- ARTICLE
- ASP
- COMPUTER
- D/XHTML CSS
- DB
- DESIGN
- FLASH
- JAVA
- network
- PHP
- SYSTEM
- 未分类
功能
- 注册
- 登录
- 文章 RSS
- 评论 RSS
- WordPress.org
标签
北京纪事对白开源程序房地产经济正则男人必读编码老婆股市经济项目管理 mingle ajax apache AVAYA cisco pix515e css CTI flex HTTP JAVA javascript memcached php Mysql PHP php qq sns Server Server Monitor sns flash 多图上传 VDN

2012 年二月
一	二	三	四	五	六	日
« 六
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

« Trackback 是怎么回事各类Http请求状态(status)及其含义 »

置顶

基于javascript的鼠标悬停效果

分类目录

功能

标签