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> 
    

      

  • 相关阅读:
    String类
    数学类
    同一场景下多个图层之间的调用
    茶壶在触摸机制下旋转的三种方式
    犀牛3D模型下载
    纹理--高清设计素材下载
    cocos2d-x-2.x与3.x帧动画实现方式的改变
    toast提示框的实现
    MenuItem创建注意事项
    Cocos2d-x 面试题解 整理01
  • 原文地址:https://www.cnblogs.com/umgsai/p/3908181.html
Copyright © 2011-2022 走看看