网页前端设计

http://www.86y.org

搜索文章

js完美的鼠标经过显title信息特效

用声音读出全文关注我吧
 2011/8/29 14:45:22 阅读次数:4569

今天自己写了个漂亮的title信息显示效果 鼠标经过文字链接时,弹出一个漂亮提示信息层。测试过的浏览器(ie.6-8,FF4.01,Safari 5.0.5)

本实例使用的是a里面的lang事件来作为显示源(因为考虑innerHTML可能是截取后的)。没有使用title为的是不显示title信息 !
效果如图

事件不需要写在a的里面,页面加载的时候自动添加事件!大家可以根据自己的需要来改成自己想要的效果!显示内容不限止格式,可以换行加<br />默认是一行的。

代码如下:

<!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=gb2312" />
<meta name="Keywords" content="网页前端设计,div+css,javascript,SEO,美文欣赏,幸凡在线学习,网页设计,技术交流区,在线学习网,免费视频教程" />
<meta name="Description" content="是一个免费提供代码分享的一个网站,有最全的SEO资料,及Div+css,javascript,SEO学习网页前端设计,在线学习网,免费视频教程" />
<title>js完美的鼠标经过显title信息特效【www.86y.org幸凡在线学习网欢迎您】。</title>
<style type="text/css">
#left a{color:#0099FF;cursor:pointer;width:150px;text-decoration:none;}
#tip{display:none;position:absolute;font-size:12px;padding:5px;color:#CC3300;background:#FFFADC;border:1px solid #CC6600;}
</style>
<script type="text/javascript">
function set_tip_show(thisTag){
	document.getElementById("tip").style.display = "block";
	document.getElementById("tip").innerHTML=thisTag.lang;
	thisTag.onmouseout = function(){
		document.getElementById("tip").style.display = "none";
	}
}

function set_tip_init(id)
{

	if (document.getElementById("tip") == null)//判断是id为tip的对对象否存在
	{
	var overlay = document.createElement("div");
	overlay.setAttribute("id", "tip");
	document.body.appendChild(overlay);
	}
	var a = document.getElementById(id).getElementsByTagName("a");
	for(i=0;i<a.length;i++)
	{
		a[i].onmouseover=function afd(){
			set_tip_show(this);
		}
		a[i].onmousemove=function afdfd(event){
			set_tip_posit(event);
		}
	}
}
function set_tip_posit(event){
	var evt = event ? event : (window.event ? window.event : null);
	var xx=evt.clientX;
	var yy=evt.clientY + 20;
	var obj = evt.srcElement ? evt.srcElement : evt.target;
	var TIP=document.getElementById("tip");
	TIP.style.left = xx + "px";
	TIP.style.top = yy + "px";
}
</script>
</head>
<body>
本实例使用的是a里面的lang事件来作为显示源(因为考虑innerHTML可能是截取后的)。没有使用title为的是不显示title信息
<div align="left" id="left">
<a href="#" lang="幸凡在线学习网网页特效供站长和js爱好者参考!">站长特效一号链接</a>
<div></div>
<a href="#" class="zzjs_net" lang="打造国内最多的网页特效站!">站长特效二号链接</a>
</div>
<script type="text/javascript">
set_tip_init("left");
</script>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭