JQuery mousemove hover预览大图_JQuery鼠标滑过显示大图

今天和大家分享一个网络上常用的效果、那就是使用鼠标mousemove 事件来预览大图

jquery鼠标滑过预览大图是一款基于jquery实现的图片放大异步加载特效代码

首页来看一下 CSS 的代码、把整个页面的 margin 和 padding 都设置成了0

* {
	margin:0;
	padding:0;
	list-style-type:none;
}
img, a {
	border:0;
}
.piccon {
	height:75px;
	margin:100px 0 0 50px;
}
.piccon li {
	float:left;
	padding:0 10px;
}
#preview {
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
}

下面是 html 的代码

<ul class="piccon">
<li>
	<a href="http://sc.chinaz.com/" rel="images/1.jpg" class="preview">
	<img src="images/1s.jpg" alt="画廊缩略图" width="100" height="75" />
	</a>
</li>
<li>
	<a href="http://sc.chinaz.com/" rel="images/2.jpg" class="preview">
	<img src="images/2s.jpg" alt="画廊缩略图" width="100" height="75" />
	</a>
</li>
<li>
	<a href="http://sc.chinaz.com/" rel="images/3.jpg" class="preview">
	<img src="images/3s.jpg" alt="画廊缩略图" width="100" height="75" />
	</a>
</li>
<li>
	<a href="http://sc.chinaz.com/" rel="images/4.jpg" class="preview">
	<img src="images/4s.jpg" alt="画廊缩略图" width="100" height="75" />
	</a>
</li>
</ul>

最后是JS代码、也是最重要的代码

this.imagePreview = function(){	
	xOffset = 10;
	yOffset = 30;
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<div id=´preview´><img src=´" 
		+ this.rel +"´ alt=´Image preview´ />"+ c +"</div>");								 
		$("#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");
	});			
};

最后在$(document).ready(function(){}); 里面调用就 ok 了、希望对大家有帮助

另外在给大家献上源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1jGqVck2 密码: 8rcp