jQuery图片放大镜插件cloudzoom.js

一款jQuery图片放大镜插件cloudzoom.js，当鼠标悬停在大图上面的时候，会有一个图片放大显示的特效，这个效果多用于商品展示时的局部放大显示，喜欢的童鞋请收下吧。

分类：图片代码 > 图片插件难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，先简单设置页面元素的样式，接着调用放大镜插件的的样式文件、jQuery库和放大镜插件，并启用插件，代码如下：

<style type="text/css">
.m{ width: 800px; margin-left: auto; margin-right: auto; margin-top: 100px}
* { margin: 0; padding: 0; list-style-type: none; text-decoration: none; font: 16px '微软雅黑'; }
/*外层盒子和里边图片的一点点样式*/
.jqueryzoom { position: relative; padding: 0; border: solid 1px #eaeaea; width: 300px; height:300px; overflow: hidden; display: inline-block; }
/*放大镜是基于图片大小自动生成的，每次都要把jqueryzoom中img的大小和jqueryzoom盒子大小设置为一样的，不然放大镜滑块有可能溢出*/
.jqueryzoom img { width: 300px; }
ul li { float: left; margin-right: 5px; }
ul li img { width: 100px; height: 100px; }
.cloudzoom-gallery-active{opacity: .5}
</style>
<!--引入cloudzoom的css和js，顺序不要错，先css，再jQuery再cloudzoom的js，这个cloudzoom也是需要jQuery支持的，其实很多插件都是基于jQuery开发的-->
<link type="text/css" rel="stylesheet" href="css/cloudzoom.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cloudzoom.js"></script>
<!--启动CloudZoom就可以了，quickStart()立即启动-->
<script type="text/javascript">
    CloudZoom.quickStart();
</script>

页面的body部分，div容器里面放入一个ul的无序图片列表，代码如下：

<div class="m">
  <div class="jqueryzoom"> 
    <!--h5支持自定义属性，而处理数据的自定义属性则以“data-”开头，这里就是cloudzoom自己封装的数据处理属性，传入参数其实就是个对象格式，zoomSizeMode是要等比例的操作模式，说白了就是你要操作哪个标签的等比例，但必须是子标签才可以，这里当然是img标签了；zoomImage则是要操作的哪个image了；autoInside则是对响应式布局的适应处理，如果页面大小变得小于或等于指定的宽度（像素），CloudZoom将在“内部”模式工作，如果不做响应式处理了，加不加都无所谓。最后title如果有值，就会显示，没值，就不显示咯-->
    <img id="img" class="cloudzoom" src="images/a1.png"
     data-cloudzoom="zoomSizeMode:'image',zoomImage: 'images/a1.png',autoInside: 30" alt="好图啊" title=""/> </div>
  
	<!--想切换多张图片，只需要改下面img中src中的路径，以及data-cloudzoom中两个img的路径，注意data-cloudzoom要和img中的路径一摸一样-->
	<ul>
	    <li> 
	    	<img class="cloudzoom-gallery" src="images/a1.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a1.png',zoomImage:'images/a1.png'"/> 
	    </li>
	    <li> 
	    	<img class="cloudzoom-gallery" src="images/a2.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a2.png',zoomImage:'images/a2.png'"/> 
	    </li>
	    <li> 
	    	<img class="cloudzoom-gallery" src="images/a3.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a3.png',zoomImage:'images/a3.png'"/> 
	    </li>
	    <li> 
	    	<img class="cloudzoom-gallery" src="images/a4.png" data-cloudzoom="useZoom:'.cloudzoom',image:'images/a4.png',zoomImage:'images/a4.png'"/> 
	    </li>
	</ul>
</div>