zoukankan      html  css  js  c++  java
  • title及alt提示特效

    <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!=""){oo.dypop=o.alt;o.alt=""}; 
     if(o.title!=null  &&  o.title!=""){oo.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(/
    /g,"<br>"); 
     MsgMsg=Msg.replace(/x13/g,"<br>"); 
     var re=/{(.[^{]*)}/ig; 
     if(!re.test(Msg))pltsTitle="『水木设计联盟』"; 
     else{ 
     re=/{(.[^{]*)}(.*)/ig; 
     pltsTitle=Msg.replace(re,"$1")+" "; 
     re=/{(.[^{]*)}/ig; 
     MsgMsg=Msg.replace(re,""); 
     MsgMsg=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="http://www.lanrentuku.com/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐,希望大家喜欢">一个很酷的鼠标悬停特效,但有问题指教,我想知道怎么控制悬停时间</a> 
    </body> 
    </html> 
    

      

  • 相关阅读:
    Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
    Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
    Hybrid APP基础篇(一)->什么是Hybrid App
    JavaScript筑基篇(一)->变量、值与对象
    深入Node.js的进程与子进程:从文档到实践
    深入Node模块Buffer-学会操作二进制
    深入Nodejs模块fs
    刷《一年半经验,百度、有赞、阿里面试总结》·手记
    Asp.Net Core 轻松学-被低估的过滤器
    css精灵图&字体图标
  • 原文地址:https://www.cnblogs.com/umgsai/p/3908181.html
Copyright © 2011-2022 走看看