分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jqzoom插件制作图片放大镜图片窗口放大显示，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_616_2@

一、效果图@H_874_7@

　　jqzoom插件用于产生图片放大镜效果，效果图如下：@H_874_7@

@H_874_7@@H_874_7@@H_874_7@

二、引入@H_874_7@

　　项目GitHub地址：https://github.com/mindprojects/jqzoom@H_874_7@

　　1、引入 jQuery@H_874_7@

@H_801_33@

1 @H_616_2@

<script src= "本地目录或cdn地址/jquery.js" type= "text/javascript" ></script> @H_616_2@ @H_616_2@

@H_616_2@ @H_616_2@ @H_616_2@

　　2、引入 jqzoom插件@H_874_7@

@H_801_33@

1 @H_616_2@

<script src= "路径/jquery.jqzoom.js" type= "text/javascript" ></script> @H_616_2@ @H_616_2@

@H_616_2@ @H_616_2@ @H_616_2@

三、配置@H_874_7@

　　1、html 文档结构@H_874_7@

　　例：@H_874_7@

1 <div class="jqzoom">
2     <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" title="免烫高支棉条纹衬衣">
3         <img src="images/pro_img/blue_one_small.jpg" >
4     </a>
5 </div>

@H_616_2@

　　2、script 脚本配置@H_874_7@

@H_616_2@

 1 $(function(){
 2     $(‘.jqzoom‘).jqzoom({
 3         //（默认值）standard / reverse,原图用半透明图层遮盖
 4         zoomType: ‘reverse‘,5         //是否在原图上显示镜头
 6         lens:true,7         // 预先加载大图片
 8         preloadImages: false,9         //放大镜是否总是显示存在
10         alwaysOn:false,11         //放大窗口的尺寸
12         zoomWidth: 340,13         zoomHeight: 340,14         //放大窗口相对于原图的偏移量、位置
15         xOffset:10,16         yOffset:0,17         position:‘right‘,18         //默认值：true，是否显示加载提示Loading zoom
19         showPreload:true,20         //默认 Loading zoom，自定义加载提示文本
21         preloadText: ‘加载中……‘
22         //imageOpacity 默认值 0.2 透明度
23         //title 是否在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值
24     });
25 });

@H_616_2@ @H_616_2@

　　3、css 样式配置@H_874_7@

@H_616_2@

  1 // jqzoom css 源码
  2 .zoomPad{
  3         position:relative;
  4         float:left;
  5         z-index:99;
  6         cursor:crosshair;
  7 }
  8  
  9  
 10 .zoomPreload{
 11    -moz-opacity:0.8;
 12    opacity: 0.8;
 13    filter: alpha(opacity = 80);
 14    color: #333;
 15    font-size: 12px;
 16    font-family: Tahoma;
 17    text-decoration: none;
 18    border: 1px solid #CCc;
 19    BACkground-color: white;
 20    padding: 8px;
 21    text-align:center;
 22    BACkground-image: url(../images/zoomloader.gif);
 23    BACkground-repeat: no-repeat;
 24    BACkground-position: 43px 30px;
 25    z-index:110;
 26    width:90px;
 27    height:43px;
 28    position:absolute;
 29    top:0px;
 30    left:0px;
 31     * width:100px;
 32     * height:49px;
 33 }
 34  
 35  
 36 .zoomPup{
 37         overflow:hidden;
 38         BACkground-color: #FFF;
 39         -moz-opacity:0.6;
 40         opacity: 0.6;
 41         filter: alpha(opacity = 60);
 42         z-index:120;
 43         position:absolute;
 44         border:1px solid #CCc;
 45   z-index:101;
 46   cursor:crosshair;
 47 }
 48  
 49 .zoomOverlay{
 50         position:absolute;
 51         left:0px;
 52         top:0px;
 53         BACkground:#FFF;
 54         /*opacity:0.5;*/
 55         z-index:5000;
 56         width:100%;
 57         height:100%;
 58         display:none;
 59   z-index:101;
 60 }
 61  
 62 .zoomWindow{
 63         position:absolute;
 64         left:435px;
 65         top:40px;
 66         BACkground:#FFF;
 67         z-index:6000;
 68         height:auto;
 69    z-index:10000;
 70    z-index:110;
 71  
 72 }
 73 .zoomWrapper{
 74         position:relative;
 75         border:1px solid #999;
 76   z-index:110;
 77 }
 78 .zoomWrappertitle{
 79         display:block;
 80         BACkground:#999;
 81         color:#FFF;
 82         height:18px;
 83         line-height:18px;
 84         width:100%;
 85   overflow:hidden;
 86         text-align:center;
 87         font-size:10px;
 88   position:absolute;
 89   top:0px;
 90   left:0px;
 91   z-index:120;
 92   -moz-opacity:0.6;
 93   opacity: 0.6;
 94   filter: alpha(opacity = 60);
 95 }
 96 .zoomWrapperImage{
 97         display:block;
 98   position:relative;
 99   overflow:hidden;
100   z-index:110;
101  
102 }
103 .zoomWrapperImage img{
104   border:0px;
105   display:block;
106   position:absolute;
107   z-index:101;
108 }
109  
110 .zoomIframe{
111   z-index: -1;
112   filter:alpha(opacity=0);
113   -moz-opacity: 0.80;
114   opacity: 0.80;
115   position:absolute;
116   display:block;
117 }
118  
119 /*********************************************************
120 / 点击原图会在选中的锚点上添加 "zoomThumBACtive" 类
121 /*********************************************************/

@H_616_2@ @H_616_2@

四、关于jqzoom图片的动态刷新@H_874_7@

@H_874_7@@H_874_7@

@H_874_7@@H_874_7@@H_874_7@

@H_874_7@

　　上图的例子中，点击略缩图，大图更换图片，需要实现右侧 jqzoom大图也同步更换。锋利的jQuery 书中的方法：　　　　@H_874_7@

@H_616_2@

// 纯 HTML实现，使用自定义 rel 属性
// 大图部分
<div class="jqzoomWrap">
    <a href="images/pro_img/blue_one_big.jpg" class="jqzoom" rel=‘gal1‘ title="免烫高支棉条纹衬衣" >
        <img src="images/pro_img/blue_one_small.jpg" title="免烫高支棉条纹衬衣" alt="免烫高支棉条纹衬衣" id="bigImg" />
    </a>
</div>

// 略缩图部分
<ul class="imgList">
    <li class="imgLisT_Blue">
        <a href=‘javascript:void(0);‘ rel="{gallery: ‘gal1‘,smallimage: ‘images/pro_img/blue_one_small.jpg‘,largeimage: ‘images/pro_img/blue_one_big.jpg‘}">
            <img src=‘images/pro_img/blue_one.jpg‘ />
        </a>
    </li>
     // 省略 li ……
</ul>

@H_616_2@ @H_616_2@

　　① 大图 jqzoom 类的 <a>标签添加属性 rel=‘gal1’，用作标识（“文中称 ‘钩子’ ”）；@H_874_7@

　　② 略缩图 <a> 标签的 rel属性设置为：@H_874_7@

{ gallery: ‘gal1‘,// 目标指向 gal1
   smallimage: ‘images/pro_img/blue_one_small.jpg‘,// 大图路径
   largeimage: ‘images/pro_img/blue_one_big.jpg‘    // jqzoom大图路径
}

@H_616_2@ @H_616_2@

@H_616_2@

大佬总结

以上是大佬教程为你收集整理的jqzoom插件制作图片放大镜图片窗口放大显示全部内容，希望文章能够帮你解决jqzoom插件制作图片放大镜图片窗口放大显示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：jqzoom 制作图片插件放大放大镜显示窗口

上一篇: jquery的淡入淡出下一篇:【webpack】中引用jQuery的三种方...

猜你在找的jQuery相关文章

javascript – window.load&$(document).ready()与jQuery版本2和3的行为不同 2022-03-30
jquery 使用html video 2019-10-09
jQuery 语法 2019-10-09
jQuery介绍 2019-10-09
jquery – 将多个表单序列化在一起？ 2019-10-09
jQuery ajax成功的匿名函数作用域 2019-10-09
jQuery – 获取元素的第二级父级 2019-10-09
jquery清除输入默认值 2019-10-09
JQuery UI：在游标位置而不是元素的中间拖放长元素 2019-10-09
jquery – 停止$.ajax在beforeSend 2019-10-09