JQuery mousemove hover预览大图_JQuery鼠标滑过显示大图
2014-09-10 13:08:32  By: dwtedx

今天和大家分享一个网络上常用的效果、那就是使用鼠标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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+