DIV+js+css跟随鼠标的浮动提示框

最新推荐文章于 2024-05-29 16:35:43 发布

MissQ-M

最新推荐文章于 2024-05-29 16:35:43 发布

阅读量6.4k

点赞数

分类专栏： Jquery 文章标签： Html jQuery div浮动

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

转载地址：http://blog.163.com/meng_qiang/blog/static/1773543732011416105516937/

<!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> 
		<title>鼠标跟随提示框</title> 
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		
		<style type="text/css"> 
			body{ font:12px/1.8 arial; } 
			a,a:visited{
				color:#3366cc;
				text-decoration:none;
			} 
			a:hover{
				color:#f60;
				text-decoration:underline;
			} 
			.tip{
				width:200px;
				border:2px solid #ddd;
				padding:8px;
				background:#f1f1f1;
				color:#666;
			} 
			img{
				border:none;
			} 
		</style> 
		
		<script type="text/javascript"> 
		
			var tip={ 
			    $:function(ele){ 
					if(typeof(ele)=="object") 
						return ele; 
					else if(typeof(ele)=="string"||typeof(ele)=="number") 
						return document.getElementById(ele.toString()); 
					return null; 
				}, 
				mousePos:function(e){ 
					var x,y; 
					var e = e||window.event; 
					return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, 
							y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop}; 
					}, 
				start:function(obj){ 
					var self = this; 
					var t = self.$("mjs:tip"); 
					obj.οnmοusemοve=function(e){ 
						var mouse = self.mousePos(e);   
						t.style.left = mouse.x + 10 + 'px'; 
						t.style.top = mouse.y + 10 + 'px'; 
						t.innerHTML = obj.getAttribute("tips"); 
						t.style.display = ''; 
					}; 
					obj.οnmοuseοut=function(){ 
						t.style.display = 'none'; 
					}; 
				} 
			} 
		</script> 
	</head> 
	<body> 
		<ol> 
			<li> 
				<a href="#" target="_blank"><img src="http://pic1.taogogo.info/image/16002/" οnmοuseοver="tip.start(this)" tips="项目中用到的一个简单的JS图片展示效果，支持大图小图原始图展示" /></a> 
			</li> 
			<li> 
				<a href="#" target="_blank" οnmοuseοver="tip.start(this)" tips="11月16日，我有幸参加了11月份的UCD杭州书友会，写了点感受与大家分享……">关于用户研究的一点思考</a> 
			</li> 
			<li> 
				<a href="#" target="_blank" οnmοuseοver="tip.start(this)" tips="早上挤城铁，挤得要命，来了个猛男，大吼一声“我是display:block”的，这一行老子独占了……">WEB重构拾趣</a> 
			</li> 
		</ol> 
		<div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div> 
	</body> 
</html>