jquery插件之-图片放大镜

(一)mlens图片放大镜

尊重原创：http://www.jq22.com/jquery-info25

1、引入以下的js和css文件

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script>
<style type="text/css">
#green_wrapper {
	position: relative;
	width: 640px;
	height: auto;
	margin: 0 auto;
	border: 12px solid #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(50,50,50 0.5);
	float: left;
}
</style>

2.在head标签中引入以下js代码

<scripttype="text/javascript">

$(document).ready(function()
{
    $("#green_monster").mlens(
    {
        imgSrc: $("#green_monster").attr("data-big"),// path of the hi-res version of the image
        lensShape: "circle",            // shape of the lens (circle or square)
        lensSize: 180,                  // size of the lens (in px)
        borderSize: 4,                  // size of the lens border (in px)
        borderColor: "#fff",            // color of the lens border (#hex)
        borderRadius: 0                 // border radius (optional, only if the shape is square)
    });
});
</script>

3.在body标签中加入以下格式的html代码

<img id="green_monster" src="images/GreenMonster_640px.jpg" alt="green monster graffiti by Kotzian" data-big="images/GreenMonster_1280px.jpg">

(二)淘宝类似图片放大镜

尊重原创：http://www.17sucai.com/pins/demoshow/358

1、引入以下的js和css文件

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script>
<style type="text/css">
*{margin:0px;padding:0;list-style-type:none;}
body{background:#E9F0F5;font-family:Arial, Helvetica, sans-serif;font-size:13px;margin:0px;padding:0px;}
html{background-color:#E9F0F5;}
img{border:none;}
h3{font-family:Tahoma, Geneva, sans-serif;font-size:14px;color:#333;letter-spacing:1px;margin-top:10px;margin-bottom:10px;}
p{margin-bottom:10px;margin-top:10px;line-height:22px;}
.demo{margin:0 auto;width:600px;}
.tickul li{line-height:24px;}
/* zoom-section */
.zoom-section{clear:both;margin-top:20px;}
*html .zoom-section{display:inline;clear:both;}
.zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;}
.zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;}
.zoom-tiny-image{border:1px solid #CCC;margin:0px;}
.zoom-tiny-image:hover{border:1px solid #C00;}
</style>

2、在body标签中加入以下格式的html代码

<div class="zoom-section">    	  
		<div class="zoom-small-image">
			<a href='images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4"><img src="images/zoomengine/smallimage.jpg" alt='' title="Optional title display" /></a></div>
		<div class="zoom-desc">
			<h3>标准设置与画廊</h3>       
			<p><a href='images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: 'images/zoomengine/smallimage.jpg' "><img class="zoom-tiny-image" src="images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
			
			<a href='images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' images/zoomengine/smallimage-1.jpg'"><img class="zoom-tiny-image" src="images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  
			<a href='images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/zoomengine/smallimage-2.jpg' "><img class="zoom-tiny-image" src="images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a></p>
			<p>悬停在大型图像变焦工作。</p>
			<p>这是设置“框出”大的形象出现的小图像的效果。</p>
			<p>可以改变较小的图像，镜头和缩放窗口的外观与普通的CSS。</p>
		</div>
	</div>

下载源码：http://pan.baidu.com/s/1mgn82jm