加速title显示的css实现方法

看九天做了<a>标签的title标题快速显示的效果，查他js，半天没找到原理。后来在蓝色理想倒查到了。用css实现

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css模拟title和alt的提示效果</title>
<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}
.info:hover {background:#eee;color:#333;}
.info span {display: none }
.info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
</style>
</head>

<body>
<a class="info" href="http://www.awebsite.cn">www.awebsite.cn<span>一品轩欢迎每一位到访的朋友，非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.awebsite.cn">www.awebsite.cn<span>一品轩欢迎每一位到访的朋友，非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.awebsite.cn">www.awebsite.cn<span>一品轩欢迎每一位到访的朋友，非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.awebsite.cn">www.awebsite.cn<span>一品轩欢迎每一位到访的朋友，非常希望能与网站设计爱好者们交流。</span></a>
<a class="info" href="http://www.awebsite.cn">www.awebsite.cn<span>一品轩欢迎每一位到访的朋友，非常希望能与网站设计爱好者们交流。</span></a>
</body>

再来一个js版的

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Tip</title>
<style type="text/css">
body{ font-size: 12px; }
</style>
</head>
<body>
<input type="text" size="40" value="我使用了title属性，把光标移动到我这个区域看下效果" title="我这个效果满意吧？" /><br /><br /><br />
<a href="#" title="这个效果COOL吧？">超链接title效果演示，光标移到我这儿看看！</a>

<a href="#" title="ss">lllll</a>
<script type="text/javascript">
function titleEffect(e)
{
e = e || event;
var element = e.srcElement || e.target;

var body = document.body;

     var tip = document.getElementById("tip-div");
     if (!tip)
     {
           tip = document.createElement("div");
           tip.id = "tip-div";
           with (tip.style)
           {
                 display = "none";
                 color = "#000";
                 backgroundColor = "#f3f3f3";
                 border = "1px solid #cccccc";
                 fontSize = "12px";
                                                padding = "5px";
                 lineHeight = "16px";
                 position = "absolute";
                 left = "0";
                 top = "0";
                 zIndex = 2000; // 一个足够大的数，保证层会处于最上层
           }
           body.appendChild(tip);
     }

     var title = element.getAttribute("title") || element.getAttribute("_title");
     if (!title) return (tip.style.display=="block") && (tip.style.display="none") || true;
     if (element.getAttribute("title"))
     {
           element.setAttribute("title", "");
           element.setAttribute("_title", title);
     }

tip.style.display = "block";

if (tip.innerHTML == title) return ;
else tip.innerHTML = "<img src='attachments/month_0710/02007101417588.gif' align='absmiddle' /> " + title;

     var left = body.scrollLeft + e.clientX + 10;
           left = (left>body.clientWidth-tip.clientWidth) ? (left-tip.clientWidth) : left;
     var top = body.scrollTop + e.clientY + 10;
           top = (top>body.clientHeight-tip.clientHeight) ? (top-tip.clientHeight) : top;
     tip.style.left = left + "px";
     tip.style.top = top + "px";
     return true;
}
document.onmousemove = titleEffect;
</script>
</body>
</html>

posted @ 2008-04-16 14:17 silenfir 阅读(879) 评论(0) 编辑收藏举报

刷新页面返回顶部

乘风归去

他山之玉,可以攻石

加速title显示的css实现方法

公告