jQuery图片放大镜插件cloudzoom.js

来源:https://www.sucaihuo.com/js/2703.html 2017-08-12 19:32浏览(962) 收藏

一款jQuery图片放大镜插件cloudzoom.js,当鼠标悬停在大图上面的时候,会有一个图片放大显示的特效,这个效果多用于商品展示时的局部放大显示,喜欢的童鞋请收下吧。
jQuery图片放大镜插件cloudzoom.js
分类:图片代码 > 图片插件 难易:初级
查看演示 下载资源: 50 下载资源 下载积分: 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>
评论4
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 3楼
    05-02 08:34
    n***7
    不错的放大镜啊,项目正需要,不错不错
  • 头像 板凳
    01-11 17:06
    结***!
    这个就是我想要的,找了半天,效果非常好
  • 头像 椅子
    08-23 09:29
    s***o
    很好,以后能用上
  • 头像 沙发
    08-16 08:45
    h***p
    这个效果多用于商品展示时的局部放大显示2
1 2