`
yl.fighter
  • 浏览: 253208 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

提示浮层跟随鼠标移动

    博客分类：
  • Web
javascript浮层跟随鼠标 
阅读更多
index.html 

<!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=UTF-8">

<title>Image Preview with jQuery</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="./Image Preview with jQuery_files/jquery.js" type="text/javascript"></script>
<script src="./Image Preview with jQuery_files/main.js" type="text/javascript"></script>

<style>
body { margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%;}

h1{font-size:180%;	font-weight:normal;	color:#555;}
h2{	clear:both;	font-size:160%;	font-weight:normal;	color:#555;	margin:0;	padding:.5em 0;}
a{	text-decoration:none;	color:#f30;	}
p{	clear:both;	margin:0;	padding:.5em 0;}
pre{	display:block;	font:100% "Courier New", Courier, monospace;	padding:10px;	border:1px solid #bae2f0;	background:#e3f4f9;		margin:.5em 0;overflow:auto;	width:800px;}

img{border:none;}
ul,li{	margin:0;	padding:0;}
li{	list-style:none;	float:left;	display:inline;	margin-right:10px;}

/*  */
#preview{	position:absolute;	border:1px solid #ccc;	background:#333;	padding:5px;	display:none;	color:#fff;	}
/*  */
</style>
</head>
<body>

	<h1>Easy Image Preview with jQuery</h1>
	
	<h2>Image gallery  (without caption)</h2>
	<ul>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/1s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/2s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/3s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" class="preview" title=""><img src="./Image Preview with jQuery_files/4s.jpg" alt="gallery thumbnail"></a></li>
	</ul>

	<h2>Image gallery (with caption)</h2>
	<ul>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" class="preview" title="Lake and a mountain"><img src="./Image Preview with jQuery_files/1s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" class="preview" title="Fly fishing"><img src="./Image Preview with jQuery_files/2s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" class="preview" title="Autumn"><img src="./Image Preview with jQuery_files/3s.jpg" alt="gallery thumbnail"></a></li>
		<li><a href="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" class="preview" title="Skiing on a mountain"><img src="./Image Preview with jQuery_files/4s.jpg" alt="gallery thumbnail"></a></li>
	</ul>

</body>
</html>


main.js 
this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");								 
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});
分享到：
| iframe或colorbox 父子窗口调用的方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics