滑动显示大图升级版

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 115 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lemon-zhang/p/7998805.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一个实用的jQuery插件，用于实现图片预览时的放大功能。该插件能够根据鼠标位置动态调整放大后的图片位置，并兼容不同类型的链接内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做了一个滑动展示大图片的demo，之后在大神博客发现大神也做过一个类似的插件。

于是把插件摘了下来研究了一下。

改动了插件显示文本的部分并增加了一点注释。效果比我的好用。

点击看效果demo

插件源码如下：

(function($){
	$.fn.preview = function(){
		var xOffset = 10; //横向偏移量
		var yOffset = 20; //纵向偏移量
		var w = $(window).width(); //页面宽度
		$(this).each(function(){
			$(this).hover(function(e){

				//检测图片和文字来生成不同的容器
				if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("href"))){
					$("body").append("<div id='preview'><div><img src='"+$(this).attr('href')+"' /><p>"+$(this).attr('title')+"</p></div></div>");
				}else{
					$("body").append("<div id='preview'><div><p>"+$(this).text()+"</p></div></div>");
				}
				$("#preview").css({
					position:"absolute",
					padding:"4px",
					border:"1px solid #f3f3f3",
					backgroundColor:"#eeeeee",
					top:(e.pageY - yOffset) + "px", //鼠标位置减去纵向偏移量来定位到鼠标偏上的位置
					zIndex:1000
				});
				$("#preview > div").css({
					padding:"5px",
					backgroundColor:"white",
					border:"1px solid #cccccc"
				});
				$("#preview > div > p").css({
					textAlign:"center",
					fontSize:"12px",
					padding:"8px 0 3px",
					margin:"0"
				});
				if(e.pageX < w/2){

					//鼠标在页面左侧则靠左展示淡入
					$("#preview").css({
						left: e.pageX + xOffset + "px",
						right: "auto"
					}).fadeIn("fast");
				}else{

					//鼠标在右边则靠左展示淡入
					$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast");	
				}
			},function(){

				//鼠标移出则删除
				$("#preview").remove();
			}).mousemove(function(e){

				//在a元素上移动时进行位置改变
				$("#preview").css("top",(e.pageY - xOffset) + "px")
				if(e.pageX < w/2){
					$("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto");
				}else{
					$("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto");
				}
			});						  
		});
	};
})(jQuery);

　　demo源码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片放大显示的jQuery插件演示页面</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("a.preview").preview();	  
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
.img-list{
    padding:1em; 
    font-size:1.1em; 
    border-bottom:1px dashed #cccccc; 
    line-height:1.4; 
    overflow:hidden; 
    zoom:1;
}
</style>
</head>

<body>
    <div class="demo-container">
        <h3 class="method-title">图片放大显示的jQuery插件演示页面</h3>
        <div class="img-list">
            <a class="preview" href="../../images/imgbig1.jpg">
                <img src="../../images/imgcommon1.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig2.jpg">
                <img src="../../images/imgcommon2.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig3.jpg">
                <img src="../../images/imgcommon3.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig4.jpg">
                <img src="../../images/imgcommon4.jpg" />
            </a>
            <a class="preview" href="../../images/imgbig5.jpg">
                <img src="../../images/imgcommon5.jpg" />
            </a>
            <p>
                <a class="preview" href="http://www.zhangxinxu.com">请勿点击</a>
            </p>
        </div>
    </div>
</body>
</html>

　　效果图如下