提示浮层跟随鼠标移动

yl.fighter

浏览: 257771 次
性别:
来自: 北京

最近访客更多访客>>

LiYunpeng

c4795712

wsl764263152

zo1698

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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();
});

example.zip (28.6 KB)
下载次数: 12

分享到：

CSS 点点 | iframe或colorbox 父子窗口调用的方法

2011-12-20 18:10
浏览 1283
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

提示浮层跟随鼠标移动

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

提示浮层跟随鼠标移动

评论

发表评论

相关推荐

nginx 配置.json文件直接访问，不下载

PHP 常见算法【冒泡排序, 快速排序, 插入排序, 选择排序, 二分法查找, ..】

牛年求牛：有一母牛，到4岁可生育，每年一头，所生均是一样的母牛，到15岁绝育，不再能生，20岁死亡，问n年后有多少头牛

PHP 递归实现层级树状展现数据

看到PHP的一道面试题, 做了下, 不知道还有没好点方法

JS 非贪婪模式详解

[转帖] js apply/call/caller/callee/bind使用方法与区别分析

用P3P header解决iframe跨域访问cookie

[转载]IE6:display:inline-block解决方案

ColorPicker(Fix IE6) 取色器

[转载]修正IE6不支持position:fixed的bug

CSS 点点

解决在iframe页面里使用了DD_belatedPNG后显示空白的bug

iframe或colorbox 父子窗口调用的方法

用js实现页面跳转的5种方法

JS浏览器检测

[转载]DIV浮动层被FLASH挡住的简单解决方法

JS+SWF实现浏览器复制

滚动条(兼容火狐、IE、chrome)[同事修改jsScrollbar]

jQuery替换element元素上已经绑定的事件

最近访客更多访客>>