实现鼠标经过超链时的提示图层

牙包天地

牙包天地

2016-02-19 20:43

下面图老师小编要向大家介绍下实现鼠标经过超链时的提示图层,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!
代码如下:
SCRIPT
var oPopup = window.createPopup();
function rdl_doClick(){
var oMessage=document.all("oMessage");
with (oPopup.document.body) {
style.backgroundColor="lightyellow";
style.border="solid black 1px";
innerHTML=oMessage.value;
}
oPopup.show(70, 70, 180, 60);
}
/SCRIPT
  Input id=oMessage size=40 value=点击弹出窗口外面的区域关闭它。 BRBRA onmouseover=rdl_doClick() onmouseout=oPopup.hide(); href="#"显示弹出窗口 /A--------------------------------------------------------------------
STYLE type=text/cssBODY {
 MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
 FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
 FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
 FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
/STYLE
SCRIPT
function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
    my_tips.style.display="";
    if (url!=null){my_tips.innerHTML="img src='"+url+"'align=left"+tips;}
    else{ my_tips.innerHTML=tips;}
    my_tips.style.left=event.clientX+10;
    my_tips.style.top=event.clientY+10;
   }
else
  {
   my_tips.style.display="none";
   }
}
/SCRIPT
A onmousemove=show(this.tips,1) onmouseout=show(this.tips,0) href="#" tips="自定义提示"测试链接/A A onmousemove="show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_member.gif')" onmouseout=show(this.tips,0) href="#" tips="又一个自定义提示"测试链接/A A onmousemove="show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_moderator.gif')" onmouseout=show(this.tips,0) href="#" tips="中华人民共和国中华人民共和国自定义提示"测试链接/A
div id=mytips style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: none; FONT-SIZE: 9pt; FILTER: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3); BORDER-LEFT: gray 1px solid; WIDTH: 150px; COLOR: red; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; HEIGHT: 16px; BACKGROUND-COLOR: #ffffff"/div----------------------------------------------------------------------
SCRIPT language=JavaScript
//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=5000;//显示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: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: 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='dypopLayer' 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.dypop=o.alt;o.alt=""};        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
 if(o.dypop!=sPop) {
   sPop=o.dypop;
   clearTimeout(curShow);
   clearTimeout(tFadeOut);
   clearTimeout(tFadeIn);
   clearTimeout(tFadeWaiting);
   if(sPop==null sPop=="") {
    dypopLayer.innerHTML="";
    dypopLayer.style.filter="Alpha()";
    dypopLayer.filters.Alpha.opacity=0;
    }
   else {
    if(o.dyclass!=null) popStyle=o.dyclass
     else popStyle="cPopText";
    curShow=setTimeout("showIt()",tPopWait);
   }
 }
}
function showIt(){
  dypopLayer.className=popStyle;
  dypopLayer.innerHTML=sPop;
  popWidth=dypopLayer.clientWidth;
  popHeight=dypopLayer.clientHeight;
  if(MouseX+12+popWidthdocument.body.clientWidth) popLeftAdjust=-popWidth-24
   else popLeftAdjust=0;
  if(MouseY+12+popHeightdocument.body.clientHeight) popTopAdjust=-popHeight-24
   else popTopAdjust=0;
  dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
  dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
  dypopLayer.style.filter="Alpha(Opacity=0)";
  fadeOut();
}
function fadeOut(){
 if(dypopLayer.filters.Alpha.opacitypopOpacity) {
  dypopLayer.filters.Alpha.opacity+=showPopStep;
  tFadeOut=setTimeout("fadeOut()",1);
  }
  else {
   dypopLayer.filters.Alpha.opacity=popOpacity;
   tFadeWaiting=setTimeout("fadeIn()",tPopShow);
   }
}
function fadeIn(){
 if(dypopLayer.filters.Alpha.opacity0) {
  dypopLayer.filters.Alpha.opacity-=1;
  tFadeIn=setTimeout("fadeIn()",1);
  }
}
document.onmouseover=showPopupText;
展开更多 50%)
分享

猜你喜欢

实现鼠标经过超链时的提示图层

Web开发
实现鼠标经过超链时的提示图层

js实现图片显示局部鼠标经过显示全部的效果

Web开发
js实现图片显示局部鼠标经过显示全部的效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JS函数实现鼠标指向后带图片的提示效果

Web开发
JS函数实现鼠标指向后带图片的提示效果

Flash AS制作创意的鼠标经过的网页导航

FLASH flash教程 autocad教程
Flash AS制作创意的鼠标经过的网页导航

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Word2010如何实现鼠标指向自动显示提示文字

电脑入门
Word2010如何实现鼠标指向自动显示提示文字

Windows8系统下实现鼠标指向某文件夹时显示提示信息及内容

windows系统
Windows8系统下实现鼠标指向某文件夹时显示提示信息及内容

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在Windows 7系统建立并开启Wifi突破智能手机上网流量限制

在Windows 7系统建立并开启Wifi突破智能手机上网流量限制

Dreamweaver 3网页设计技巧集锦(一)

Dreamweaver 3网页设计技巧集锦(一)
下拉加载更多内容 ↓