模拟title提示效果

原创 2010年04月02日 08:27:00

很多时候我们都要给元素加个提示,比如用td的title,img的alt等,但是他们停留的时间都很短,并且有些时候根本就不出来。能不能替换下他们呢?

实战开发用到了两个地方,一个是显示简单的提示,比如"Hello World!",另一个我用的是一个很强大的js包,叫做wz-tooltip,可能有人用到过,它有很多属性可供选择来呈现不同的显示。

第一个 

简单的提示:

一个脚本,暂起名为title.js。这是我从网上找的个,然后根据自己的需求改了改。

var pltsPop = null;
var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离;3-12 合适
var pltsPopbg = "#FFFFEE"; //背景色
var pltsPopfg = "#111111"; //前景色
var pltsTitle = "";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits() {
    document.onmouseover = plts;
    document.onmousemove = moveToMouseLoc;
    document.onmouseout = 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 = "<font color=#ffffff>" + title + "</font>";
        else {
            re = //{(.[^/{]*)/}(.*)/ig;
            pltsTitle = Msg.replace(re, "$1") + " ";
            re = //{(.[^/{]*)/}/ig;
            Msg = Msg.replace(re, "");
            Msg = Msg.replace("<br>", "");
        }
        var attr = (document.location.toString().toLowerCase().indexOf("list.asp") > 0 ? "nowrap" : "");
        var content =
      '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">' +
      '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>' + pltsTitle + '</p><p id=topright align=right style="display:none">' + pltsTitle + '<font color=#ffffff>↗</font></b></th></tr>' +
      '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">' + Msg + '</td></tr>' +
      '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>' + pltsTitle + '</p><p id=botright align=right style="display:none">' + pltsTitle + '<font color=#ffffff>↘</font></b></th></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 (event.type == "click" || event.type == "mouseout") {
        pltsTipLayer.style.display = "none";
        return true;
    }
       
    if (pltsTipLayer.innerHTML == '') return true;
    var MouseX = event.x;
    var MouseY = event.y;
    //window.status=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;
}
样式表:

.tableBorder7{width:800;border:solid 1px #000000; background-color: #000000;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}

 

前台调用:

 //替换title
          pltsinits(); //想加提示的元素必须事先加上title或者alt

 

第二个

这个脚本可以从网上下载,叫wz_tooltip.js,从http://www.walterzorn.com下载。

<script src="wz_tooltip.js" type="text/javascript"></script>要放在<body>里面,这个比较特殊。

function pltsinits() {
        var otdArr = document.getElementsByTagName("TD");
        //alert(otdArr.length)
        for (i = 0; i < otdArr.length; i++) {
            if (otdArr[i].sm != null && otdArr[i].sm != "") {//属性sm为自定义,不能为title,否则第一次的时候正常,第二次title就成""
                var ottlArr = otdArr[i].sm.split("|");
                var content = ottlArr[1];
                if (content != null && content != "") {
                    otdArr[i].onmouseover = function(event) {//这里面不能再用到上面定义的变量,否则取到的值会始终是最后一个
                    var e = (event) ? event : window.event; //兼容浏览器
                    var otd = e.srcElement; //alert(otd.outerHTML)
                    var ttlArr = otd.sm.split("|");
                        var bt = type + ttlArr[0] + "区块";
                        var cnt = ttlArr[1];
                        Tip(cnt, TITLE, bt, TITLEBGCOLOR, '#333333', TITLEFONTCOLOR, '#ffffff', HEIGHT, -100, WIDTH, 250, BGCOLOR, '#B1EA45', STICKY, true, DURATION, 2500, SHADOW, true, SHADOWCOLOR, '#dd99aa')
                    }
                    otdArr[i].onmouseout = function() { UnTip(); }
                }
                else
                    otdArr[i].sm = "";
            }
        }
    }

 

比如一个td <td sm='计划|<%# Eval("jhqk").ToString().Trim()%>'

 

写的比较粗糙,以后再修改。呵呵

css模拟title和alt的提示效果

  • 2008年12月25日 10:15
  • 1KB
  • 下载

css模拟title和alt的提示效果

  • 2008年10月20日 01:14
  • 1KB
  • 下载

android popupwindow 模拟新浪、腾讯title弹框效果

首先在上节中是使用dialog 实现的,(点击连接),现在我就讲些popupwindow 的实现,这个相对dialog比较简单,因为不用自定义dialog.      实现代码很简单如下:    ...

android dialog 模拟新浪、腾讯title弹框效果

首先我们看一下新浪微博的效果(其它就是一个dialog):                                                       点击title前      ...

popupwindow 模拟新浪、腾讯title弹框效果

实现的一个popuwindow效果外部引用原始文档 1 2 实现的一个popuwindow效果,喜欢的朋友可以拿来直接使用. 原文地址:http://www...
  • MYBOYER
  • MYBOYER
  • 2013年05月22日 12:13
  • 695

ScrollView 滑动title渐变效果

  • 2016年03月21日 15:34
  • 7.79MB
  • 下载

android四大组件之一广播notification(通知)的Title模拟下载

这里简单说一个Title里的下载进度条和下载的内容,下面就看一下代码的实现: 1、新建一个点击就可以马上下载的一个按钮 ...

模拟新浪腾讯title选项卡

  • 2012年07月19日 17:53
  • 160KB
  • 下载

支持图片的title效果代码

  • 2008年08月26日 08:55
  • 3KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模拟title提示效果
举报原因:
原因补充:

(最多只允许输入30个字)