一个解决title浮显时间短暂的好办法

这也是转载某个牛哥们的，相当好用 ！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>20110628实际应用当中，我还没有将JS分离出去，只能作为单页进行显示，需要以后不断摸索</title>
<style type="text/css">
  div {font-size:12px}
  table {font-size:12px}
</style>
<script language="JavaScript">
 function ShowImg(content)
 {
  newX = window.event.x + document.body.scrollLeft;
  newY = window.event.y + document.body.scrollTop;
  document.all.mytable.innerHTML = content;
  document.all.mydiv.style.display = "";
  document.all.mydiv.style.pixelLeft = newX + 10;
  document.all.mydiv.style.pixelTop = newY + 10;
 }
 function HidImg(url)
 {
  document.all.mydiv.style.display = "none";
 }
</script>
</head><body>
<div id="mydiv" style="BORDER:#000000 1px solid; Z-INDEX:2; POSITION:absolute;DISPLAY:none; background-color:#FFFFFF;"><table width="200" border=0><tr><td   id="mytable" valign="top"></td></tr></table></div>
<table cellSpacing="1" cellPadding="3" width="60%" align="center" border="1">    
 <tr height="25">
  <td align="center" onMouseMove="ShowImg(this.value)" onMouseOut="HidImg()" value="写了一个模拟的Title，可以解决系统title鼠标悬停时间短的问题，大家可以方便使用！">测试数据。</td>
 </tr>
 <tr height="25">
  <td align="center" onMouseMove="ShowImg(this.value)" onMouseOut="HidImg()" value="写了一个模拟的Title，可以解决系统title鼠标悬停时间短的问题，大家可以方便使用！">测试数据。</td>
 </tr>
 <tr height="25">
  <td align="center" onMouseMove="ShowImg(this.value)" onMouseOut="HidImg()" value="99999">测试数据。</td>
 </tr>
 <tr height="25">
  <td align="center" onMouseMove="ShowImg(this.value)" onMouseOut="HidImg()" value="写了一个模拟的Title，可以解决系统title鼠标悬停时间短的问题，大家可以方便使用！">测试数据。</td>
 </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    js取得title用div显示,删除title.鼠标移走的时候还原title属性
      

  2.   

    1.JS写得浏览器不兼容。
    2.搜索引擎会处理title的内容，所以象2楼所说保留HTML里的TITLE，在运行时用JS取消TITLE，这样比较好。
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <title>弹出层效果</title>
    <style type="text/css">
    html, body {height:100%;}
    body, h2, p {margin:0px;padding:0px; font-size:12px;}
    body {font-size:12px; text-align:center; }
    .alert_backg {width:100%;height:100%;top:0px;left:0px;position:absolute;background:#000;opacity:0;filter:alpha(opacity:0)}
    .alert_frame {width:340px;height:120px;top:50%;left:50%;position:absolute;display:inline;margin:-60px 0 0 -170px;opacity:0;filter:alpha(opacity:0)}
    .alert_frame .top_l {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat;}
    .alert_frame .top_c {width:330px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-x;}
    .alert_frame .top_r {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat -5px 0;}
    .alert_frame .con {width:100%;height:110px;float:left;overflow:hidden;}
    .alert_frame .con_l {width:5px;height:100%;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-y;}
    .alert_frame .con_c {width:330px;height:100%;float:left;overflow:hidden;background:#fff;}
    .alert_frame .con_r {width:5px;height:100%;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-y;}
    .alert_frame .bot_l {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat 0 -5px;}
    .alert_frame .bot_c {width:330px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/wraplayer.png) repeat-x;}
    .alert_frame .bot_r {width:5px;height:5px;float:left;overflow:hidden;background:url(/jscss/demoimg/201109/corner.png) no-repeat -5px -5px;}
    .alert_frame .alert_tit {width:328px;height:27px;float:left;color:#000;line-height:27px;border:1px solid #fff;background:url(/jscss/demoimg/201109/alert_tit_bg.jpg) repeat-x;}
    .alert_frame .alert_tit h2 {float:left;text-indent:10px;font-size:14px;font-weight:bold;font-family:"\u5FAE\u8F6F\u96C5\u9ED1";}
    .alert_frame .alert_tit em {width:8px;height:7px;overflow:hidden;float:right;cursor:pointer;background:url(/jscss/demoimg/201109/gnbimgs.gif) no-repeat;display:inline;margin:10px 10px 0 0;}
    .alert_frame .alert_tit em.hove {background:url(/jscss/demoimg/201109/gnbimgs.gif) no-repeat -8px 0;}
    .alert_frame .alert_con {width:330px;height:81px;float:left;border-top:1px solid #e5e5e5;}
    .size {width:100%;height:45px;text-align:center;line-height:45px;color:#000;}
    .but {width:100%;height:22px;text-align:center;line-height:22px;}
    .button {width:55px;height:22px;text-align:center;line-height:22px;color:#fff;background:url(/jscss/demoimg/201109/but.jpg) no-repeat;border:none;display:inline;margin:0 8px;cursor:pointer;}
    .title {width:800px;height:35px;color:#fff;line-height:35px;font-family:Verdana;font-weight:bold;text-align:left;margin:20px auto 0 auto;font-size:24px;}
    .table {width:800px;height:auto;overflow:hidden;margin:0 auto 20px auto;font-size:12px;border-top:1px solid #ddd;border-left:1px solid #ddd;background:#fff;}
    .table ul {margin:0px;padding:0px;float:left;list-style-type:none;}
    .table li {width:159px;height:30px;float:left;color:#3e3e3e;text-indent:10px;text-align:left;line-height:30px;font-family:Verdana,"微软雅黑"; border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
    .table li.td {color:#fff;font-size:14px;font-family:"微软雅黑";font-weight:bold;background:#424242;}
    .table li.tit {width:479px;}
    .table .tr {width:800px;height:30px;float:left;text-indent:10px;text-align:left;line-height:30px;font-size:14px;font-family:Verdana;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
    .table .tr a {color:#ff6600;text-decoration:none;}
    .table .tr a:hover {text-decoration:underline;}
    </style>
      

  4.   

    <script type="text/javascript">
    function $(id){
    return typeof id === "string" ? document.getElementById(id) : id;
    }
    function $$(oParent, elem){
    return (oParent || document).getElementsByTagName(elem);
    }
    function $$$(oParent, sClass){
    var aElem = $$(oParent, '*');
    var aClass = [];
    var i = 0;
    for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
    return aClass;
    }
    function Alert(){
    this.initialize.apply(this, arguments);
    }
    Object.extend = function(destination, source){
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    };
    Alert.prototype = {
    initialize : function(obj, frame, onEnd){
    if($(obj)){
    var _this = this;
    this.obj = $(obj);
    this.frame = frame;
    this.oEve(onEnd);
    this.oTitle = this.onEnd.title;
    this.oContent = this.onEnd.content;
    this.iWidth = this.onEnd.width;
    this.iHeight = this.onEnd.height;
    this.iTop = this.onEnd.top;
    this.iLeft = this.onEnd.left;
    this.iFixed = this.onEnd.fixed;
    this.iClose = this.onEnd.close;
    this.obj.onclick = function(){_this.create(),_this.backg();};
    window.onresize = function(){_this.backg();};
    }
    },
    create : function(){
    this.oDiv = document.createElement('div');
    this.oAlert_backg = document.createElement('div');
    this.oAlert_frame = document.createElement('div');
    this.oTop_l = document.createElement('div');
    this.oTop_c = document.createElement('div');
    this.oTop_r = document.createElement('div');
    this.oCon = document.createElement('div');
    this.oCon_l = document.createElement('div');
    this.oCon_c = document.createElement('div');
    this.oCon_r = document.createElement('div');
    this.oBot_l = document.createElement('div');
    this.oBot_c = document.createElement('div');
    this.oBot_r = document.createElement('div');
    this.oDiv.id = this.frame;
    this.oAlert_backg.className = 'alert_backg';
    this.oAlert_frame.className = 'alert_frame';
    this.oTop_l.className = 'top_l';
    this.oTop_c.className = 'top_c';
    this.oTop_r.className = 'top_r';
    this.oCon.className = 'con';
    this.oCon_l.className = 'con_l';
    this.oCon_c.className = 'con_c';
    this.oCon_r.className = 'con_r';
    this.oBot_l.className = 'bot_l';
    this.oBot_c.className = 'bot_c';
    this.oBot_r.className = 'bot_r';
    document.body.appendChild(this.oDiv);
    this.box = $(this.frame);
    this.box.appendChild(this.oAlert_backg);
    this.box.appendChild(this.oAlert_frame);
    this.oFra = $$$(this.box, 'alert_frame')[0];
    this.oFra.appendChild(this.oTop_l);
    this.oFra.appendChild(this.oTop_c);
    this.oFra.appendChild(this.oTop_r);
    this.oFra.appendChild(this.oCon);
    this.oFra.appendChild(this.oBot_l);
    this.oFra.appendChild(this.oBot_c);
    this.oFra.appendChild(this.oBot_r);
    this.oCone = $$$(this.box, 'con')[0];
    this.oCone.appendChild(this.oCon_l);
    this.oCone.appendChild(this.oCon_c);
    this.oCone.appendChild(this.oCon_r);
    this.tit = $(this.frame);
    this.con = $$$(this.tit, 'con_c')[0];
    this.oAlert_tit = document.createElement('div');
    this.oAlert_con = document.createElement('div');
    this.oH2 = document.createElement('h2');
    this.oAlert_tit.className = 'alert_tit';
    this.oAlert_con.className = 'alert_con';
    if(this.oTitle != ""){
    this.con.appendChild(this.oAlert_tit);
    this.con.appendChild(this.oAlert_con);
    this.oAlert_tit = $$$(this.tit, 'alert_tit')[0];
    this.oH2.innerHTML = this.oTitle;
    this.oAlert_tit.appendChild(this.oH2);
    }
    this.content();
    this.width();
    this.height();
    this.top();
    this.left();
    this.fixed();
    this.close();
    this.Top = this.oFra.offsetTop;
    this.oFra.style.top = (this.Top - 40) +'px';
    this.oFra.style.marginTop = 0;
    this.sMove(this.oFra, {top:this.Top, opacity:100});
    this.sMove(this.oBackg, {opacity:50});
    },
    oEve: function(onEnd){
            this.onEnd = {};
            Object.extend(this.onEnd, onEnd || {});
        },
    content : function(){
    this.conent = $$$(this.tit, 'alert_con')[0];
    this.conent == undefined ? this.con.innerHTML = this.oContent : this.conent.innerHTML = this.oContent;
    this.oButton = $$(this.tit, 'button');
    var i = 0;
    var _this = this;
    for(i=0;i<this.oButton.length;i++)this.oButton[i].onclick = function(){_this.em.onclick()};
    },
    width : function(){
    this.oBackg = $$$(this.tit, 'alert_backg')[0];
    this.oFrame = $$$(this.tit, 'alert_frame')[0];
    this.oCon = $$$(this.oFrame, 'con')[0];
    this.oTop_c = $$$(this.oFrame, 'top_c')[0];
    this.oCon_c = $$$(this.oFrame, 'con_c')[0];
    this.oBot_c = $$$(this.oFrame, 'bot_c')[0];
    this.oAlert_tit = $$$(this.oFrame, 'alert_tit')[0];
    this.oAlert_con = $$$(this.oFrame, 'alert_con')[0];
    if(this.iWidth != ""){
    this.oFrame.style.width = parseInt(this.iWidth) +'px';
    this.oFrame.style.marginLeft = -parseInt(this.iWidth) / 2 +'px';
    this.oTop_c.style.width = parseInt(this.iWidth) - 10 +'px';
    this.oCon_c.style.width = parseInt(this.iWidth) - 10 +'px';
    this.oBot_c.style.width = parseInt(this.iWidth) - 10 +'px';
    this.oAlert_tit.style.width = parseInt(this.iWidth) - 12 +'px';
    this.oAlert_con.style.width = parseInt(this.iWidth) - 10 +'px';
    }
    },
    height : function(){
    if(this.iHeight != ""){
    this.oFrame.style.height = parseInt(this.iHeight) +'px';
    this.oFrame.style.marginTop = -parseInt(this.iHeight) / 2 +'px';
    this.oCon.style.height = parseInt(this.iHeight) - 10 +'px';
    this.oAlert_con.style.height = parseInt(this.iHeight) - 40 +'px';
    }
    },
    top : function(){
    if(this.iTop != "")this.oFrame.style.top = parseInt(this.iTop) +'px',this.oFrame.style.marginTop = 0;
    },
    left : function(){
    if(this.iLeft != "")this.oFrame.style.left = parseInt(this.iLeft) +'px',this.oFrame.style.marginLeft = 0;
    },
    backg : function(){
    this.oScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    this.oScrollWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
    this.oBackg.style.width = document.documentElement.clientWidth + (this.oScrollWidth - document.documentElement.clientWidth) +'px'
    this.oBackg.style.height = document.documentElement.clientHeight + (this.oScrollHeight - document.documentElement.clientHeight) +'px'
    },
    fixed : function(){
    if(this.iFixed == "fixed"){
    var _this = this;
    this.oFrame.style.position = 'fixed';
    this.oAlert_tit.style.cursor = 'move';
    this.oAlert_tit.onmousedown = function(e){
    var _thisE = this;
    this.oEvent = e || event;
    this.X = this.oEvent.clientX - _this.oFrame.offsetLeft;
    this.Y = this.oEvent.clientY - _this.oFrame.offsetTop;
    document.onmousemove = function(e){
    this.oEvent = e || event;
    this.L = this.oEvent.clientX - _thisE.X;
    this.T = this.oEvent.clientY - _thisE.Y;
    if(this.L < 0){
    this.L = 0;
    }else if(this.L > document.documentElement.clientWidth - _this.oFrame.offsetWidth){
    this.L = document.documentElement.clientWidth - _this.oFrame.offsetWidth
    }
    if(this.T < 0){
    this.T = 0;
    }else if(this.T > document.documentElement.clientHeight - _this.oFrame.offsetHeight){
    this.T = document.documentElement.clientHeight - _this.oFrame.offsetHeight;
    }
    _this.oFrame.style.left = this.L + 'px';
    _this.oFrame.style.top = this.T + 'px';
    _this.oFrame.style.margin = 0;
    return false;
    }
    document.onmouseup = function(){
    document.onmouseup = null;
    document.onmousemove = null;
    };
    return false;

    };
    if(this.oFrame){
    if(!-[1,] && !window.XMLHttpRequest){
    document.documentElement.style.textOverflow = "ellipsis";
    this.oFrame.style.position = "absolute";
    this.oFrame.style.setExpression("top", "eval(documentElement.scrollTop + " + this.oFrame.offsetTop + ') + "px"');
    }
    }
    }
    },
      

  5.   

    close : function(){
    if(this.iClose == "close" && this.oTitle != ""){
    var _this = this;
    this.clos = $$$(this.tit, 'alert_tit')[0];
    var oEm = document.createElement('em');
    this.clos.appendChild(oEm);
    this.em = $$(this.tit, 'em')[0];
    this.em.onmouseover = function(){_this.em.className = 'hove';};
    this.em.onmouseout = function(){_this.em.className = '';};
    this.em.onclick = function(){
    _this.sMove(_this.oFra, {top:(_this.Top - 40), opacity:0},function(){
    document.body.removeChild(_this.em.parentNode.parentNode.parentNode.parentNode.parentNode);
    });
    _this.sMove(_this.oBackg, {opacity:0});
    }
    }
    },
    getStyle : function(obj, attr)
    {
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
    },
    sMove : function(obj, json, onEnd){
    var _this = this;
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
    _this.dMove(obj, json, onEnd);
    },30);
    },
    dMove : function(obj, json, onEnd){
    this.attr = '';
    this.bStop = true;

    for(this.attr in json){
    this.iCur = 0;
    this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr));
    this.iSpeed = (json[this.attr] - this.iCur) / 7;
    this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed);
    if(json[this.attr] != this.iCur)this.bStop = false;
    if(this.attr == 'opacity'){
    obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')';
    obj.style.opacity = (this.iCur + this.iSpeed ) / 100;
    }else{
    obj.style[this.attr] = this.iCur + this.iSpeed + 'px';
    }
    }
    if(this.bStop){
    clearInterval(obj.timer);
    if(onEnd)onEnd();
    }
    }
    };
    window.onload = function(){
    new Alert('but', 'box', {
    title : '提示内容',
    content : '<div class="size">确定不在关注新浪微博？</div><div class="but"><button class="button">确定</button><button class="button">取消</button></div>',
    width : '',
    height : '',
    top : '',
    left : '',
    fixed : '',
    close : 'close'
    });
    };
    </script>
    </head>
    <body style="height:950px;">
    <div class="title">API</div>
    <div class="table">
    <ul>
         <li class="td">属性</li>
            <li class="td">默认值</li>
            <li class="tit td">说明</li>
            <li>ButId</li>
            <li>but</li>
            <li class="tit">点击按钮Id（必选）</li>
            <li>ElementId</li>
            <li>box</li>
            <li class="tit">弹出层Id（必选）</li>
            <li>title</li>
            <li>提示信息</li>
            <li class="tit">提示层标题（可选）</li>
            <li>content</li>
            <li>自行编辑</li>
            <li class="tit">提示层内容（可选）</li>
            <li>width</li>
            <li>340px</li>
            <li class="tit">提示层宽度（可选）</li>
            <li>height</li>
            <li>120px</li>
            <li class="tit">提示层高度（可选）</li>
            <li>top</li>
            <li>绝对居中</li>
            <li class="tit">提示层上间距（可选）</li>
            <li>left</li>
            <li>绝对居中</li>
            <li class="tit">提示层上间距（可选）</li>
            <li>fixed</li>
            <li>相对定位</li>
            <li class="tit">跟谁滚动条绝对定位/是否拖拽（fixed:'fixed'）（可选）</li>
            <li>close</li>
            <li>close</li>
            <li class="tit">是否显示关闭按钮（close:'close'）（可选）</li>
        </ul>
        <div class="tr"><a href="javascript:;" id="but">Examples</a></div>
    </div>
    </body>
    </html>