添加收藏
 系统管理
 联系方式
  汉南在线网页设计HTML/CSS

title及alt提示特效
作  者:匿名
关键字:CSS、DIV



这是从动网论坛中分离出来的TITLE及ALT提示效果,很是不错哦。

将以下内容保存为plts.js文件: 

    var pltsPop=null;
    var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离;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(/\0x13/g,"<br>");
     var re=/\{(.[^\{]*)\}/ig;
     if(!re.test(Msg))pltsTitle="汉南在线";
     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(); 

    参数及提示请根据具体情况作相应修改。

    JS文件调用,在公用文件中,加入

    <script language="javascript" src="路径/plts.js"></script>

    即可。

    特效的使用:

    1、图片提示效果:<img src="xxx" alt="xxx">

    2、链接提示效果:<a href="xxx" title="xxx">

    当提示内容过多时,可以使用<br>来换行。

    赶快试试吧。



来源:网络
阅读:32
日期:2007-11-15

【 双击滚屏 】 【 推荐朋友 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:用css模拟title和alt提示效果
下一篇:CSS滤镜属性详解

  >> 相关文章
 
  ·用css模拟title和alt提示效果
  ·轻松玩转花样表单
  ·css打造经典鼠标触发显示选项
  ·CSS实现 DIV圆角
  ·CSS 在线编辑器
  ·用CSS实现气泡式提示效果
  ·DIV 垂直居中问题的修正
  ·DIV背景半透明,DIV中的字不半透明

5.12汶川大地震遇难同胞默哀 | 汉南在线总站 | 免费电影 | BT电影下载 | 东莞信息网 | 流行购商城

授权使用:汉南在线 http://hnzx.hzwz.net/
经营许可证:陕ICP备05000109号 Powered by:汉南在线
Copyright (c) 2002-2007 汉南在线. All Rights Reserved .