zoukankan      html  css  js  c++  java
  • jQuery自定义插件之商城图片放大镜效果

    更多jQuery常用插件使用请访问:jQuery常用插件汇总


    jQuery自定义插件之商城图片放大镜效果是网页中最常见不过的插件了,所以写一个自用插件,偷懒一下。
    上源码,想用的直接复制走,保存在一个js文件即可使用。

    效果插件源码

    /*
     * @Author: JiaoShou 
     * @Date: 2020-07-09 16:46:34 
     * @Last Modified by: JiaoShou
     * @Last Modified time: 2020-07-10 18:18:46
     */
    ;(function(window,$,undefined){
    
      $.fn.extend({
        /**
         * 放大镜效果
         * @param {object} option  可选参数
         */
        'cloudzoom': function(option){
          var defaults = {
                smallEl: '.cloudzoom-small',      //存放缩略图的元素,不能省略jq获取元素时候的#、.
                bigWidth: 0,     //大图盒子可视窗口宽度,不带单位的number,传值不能转换成数字,会被强制改成默认值,不传参数,默认就是小图的尺寸
                bigHeight: 0,     //大图盒子可视窗口高度,不带单位的number,传值不能转换成数字,会被强制改成默认值,不传参数,默认就是小图的尺寸
                bigoffsetTop: 0,     //大图盒子的距离顶部偏移位置,不带单位的number,传值不能转换成数字,会被强制改成默认值
                bigoffsetLeft: 0,     //大图盒子的距离左侧偏移位置,不带单位的number,传值不能转换成数字,会被强制改成默认值
                scale: 2,       //设置小图放大倍数后的数值给大图用,不带单位的number,传值不能转换成数字,会被强制改成默认值
              },
              opts = $.extend({}, defaults, option);
          
          return this.each(function () {
            
            var cloudzoom = {
              $el: $(this), //事件对象
              defaults: defaults,      //插件默认值
              smallEl: opts.smallEl,      //存放缩略图的元素,不能省略jq获取元素时候的#、.
              bigWidth: opts.bigWidth,     //大图盒子的宽度,不带单位的number,传值不能转换成数字,会被强制改成默认值
              bigHeight: opts.bigHeight,     //大图盒子的高度,不带单位的number,传值不能转换成数字,会被强制改成默认值
              bigoffsetTop: opts.bigoffsetTop,     //大图盒子的距离顶部偏移位置,不带单位的number,传值不能转换成数字,会被强制改成默认值
              bigoffsetLeft: opts.bigoffsetLeft,     //大图盒子的距离左侧偏移位置,不带单位的number,传值不能转换成数字,会被强制改成默认值
              scale: opts.scale,       //设置小图放大倍数后的数值给大图用,不带单位的number,传值不能转换成数字,会被强制改成默认值
              $small: null,      //获取small对象
              $shadow: null,      //获取shadow对象
              $zoomIcon: null,      //获取zoomIcon对象
              $smallImg: null,      //获取smallImg对象
              $big: null,      //获取big对象
              $bigImg: null,      //获取bigImg对象
              smallImgWidth:0,       //小图width
              smallImgHeight:0,       //小图height
              smallImgSrc:'',       //小图src
              bigImgSrc:'',       //大图src
              // 初始化
              'init': function(){
                // 规范初始化参数
                this.initProp();
      
                // 创建shadow小图右下角放大镜icon
                this.createHtml();
    
                // 创建大图结构
                this.createBigHtml();
      
                // 调用small事件
                this.smallFn();
              },
              // 规范传入参数,如果不合规,恢复为插件默认值
              'initProp': function(){
                
                // 规范传入数字型参数,防止手残输入错误,输入错误则恢复成插件默认值
                this.bigWidth = Number(this.bigWidth) || this.defaults.bigWidth;
                this.bigHeight = Number(this.bigHeight) || this.defaults.bigHeight;
                this.bigoffsetTop = Number(this.bigoffsetTop) || this.defaults.bigoffsetTop;
                this.bigoffsetLeft = Number(this.bigoffsetLeft) || this.defaults.bigoffsetLeft;
                this.scale = Number(this.scale) || this.defaults.scale;
      
                // 获取小图选择器
                this.smallEl = $.trim(this.smallEl) ||  this.defaults.smallEl;
                // 获取小图jq对象
                this.$small = $(this.smallEl,this.$el);
                // 获取小图img jq对象
                this.$smallImg = this.$small.find('img');
                // 获取小图width
                this.smallImgWidth = this.$smallImg.width();
                // 获取小图height
                this.smallImgHeight = this.$smallImg.height();
                // 获取小图src
                this.smallImgSrc = this.$smallImg.attr('src');
                // 获取大图src
                this.bigImgSrc = this.$smallImg.attr('src');
                
                if (!this.bigWidth) {
                  // 如果这个值是0,就用小图的尺寸
                  // 大图可视窗口宽度
                  this.bigWidth = this.$small.width();
                }
                if (!this.bigHeight) {
                  // 如果这个值是0,就用小图的尺寸
                  // 大图可视窗口高度
                  this.bigHeight = this.$small.height();
                }
                if (!this.bigoffsetLeft) {
                  // 如果这个值是0,就用小图的宽度+50
                  // 大图可视窗口偏移量
                  this.bigoffsetLeft = this.smallImgWidth + 50;
                }
              },
              // 创建shadow小图右下角放大镜icon
              'createHtml': function(){
    
                // 创建遮罩层和放大镜icon
                var str = '<span class="cloudzoom-shadow" style=" 100px;height: 100px;background: #ff0202;position: absolute;left:0;top:0;opacity: 0.4;filter:alpha(opacity:40);display: none;"></span>'+
                          '<i class="cloudzoom-zoom-icon" style="height: 30px; 30px;z-index: 2;position: absolute;right: 0;bottom: 0;"></i>';
                
                // 如果存在了,先把存在的删除掉,循环调用cloudzoom插件的时候会出现这个问题
                if ($('.cloudzoom-shadow',this.$el).length >=1 ) {
                  $('.cloudzoom-shadow',this.$el).remove();
                }
                // 如果存在了,先把存在的删除掉,循环调用cloudzoom插件的时候会出现这个问题
                if ($('.cloudzoom-zoom-icon',this.$el).length >=1 ) {
                  $('.cloudzoom-zoom-icon',this.$el).remove();
                }
                // 插入遮罩层和放大镜icon
                this.$small.append(str);
                
                // 获取shadow对象
                this.$shadow = $('.cloudzoom-shadow', this.$el);
                // 获取zoomIcon对象
                this.$zoomIcon = $('.cloudzoom-zoom-icon', this.$el);
                
              },
              // 创建大图结构
              'createBigHtml': function () {
                var smallImgWidth = this.smallImgWidth;
                var smallImgHeight = this.smallImgHeight;
                var scale = this.scale;
                var bigImgSrc = this.bigImgSrc;
                var bigoffsetTop = this.bigoffsetTop;
                var bigoffsetLeft = this.bigoffsetLeft;
                var bigWidth = this.bigWidth;
                var bigHeight = this.bigHeight;
                // 创建大图结构
                var str = '<div class="cloudzoom-big" style="background:#fff;z-index:100;margin:0;padding:0;position:absolute;display:none;overflow:hidden;'+bigWidth+'px;height:'+bigHeight+'px;left:'+bigoffsetLeft+'px;top:'+bigoffsetTop+'px">'+
                '  <img src="'+bigImgSrc+'" style="margin:0;padding:0;'+ smallImgWidth * scale+'px;height:'+smallImgHeight * scale+'px;"/>'+
                '</div>';
      
                // 如果存在了,先把存在的删除掉,循环调用cloudzoom插件的时候会出现这个问题
                if ($('.cloudzoom-big',this.$el).length >=1 ) {
                  $('.cloudzoom-big',this.$el).remove();
                }
                // 插入大图布局
                this.$el.append(str);
                this.$big = this.$el.find('.cloudzoom-big');
                this.$bigImg = this.$big.find('img');
              },
              // 显示元素
              'showEl': function(el) {
                el.css('display','block');
              },
              // 隐藏元素
              'hiddenEl': function(el) {
                el.css('display','none');
              },
              // 鼠标进入small
              'smallEnter': function(){
                // 绑定this指向
                var _this = this;
                // 鼠标移入小图
                this.$small.on('mouseenter', function(){
                  // 显示shadow
                  _this.showEl(_this.$shadow);
                  // 显示big
                  _this.showEl(_this.$big);
                  // 隐藏zoomIcon
                  _this.hiddenEl(_this.$zoomIcon);
                });
              },
              // 鼠标移出small
              'smallLeave': function(){
                // 绑定this指向
                var _this = this;
      
                // 鼠标移出小图
                this.$small.on('mouseleave', function(){
                  // 显示zoomIcon
                  _this.showEl(_this.$zoomIcon);
                  // 隐藏shadow
                  _this.hiddenEl(_this.$shadow);
                  // 隐藏big
                  _this.hiddenEl(_this.$big);
                });
              },
              // 鼠标在小图内移动
              'smallmove': function(){
                // 绑定this指向
                var _this = this;
      
                this.$small.on('mousemove',function(){
                  var l = event.pageX - $(this).offset().left - _this.$shadow.width()/2;
                  var t = event.pageY - $(this).offset().top - _this.$shadow.height()/2;
                  var bigl = 0;
                  var bigt = 0;
                  // 防止遮罩超出左边,到0不继续偏移
                  if(l<0){
                    l=0;
                  }
                  // 防止遮罩超出右边,到可视区-遮罩宽度范围不继续偏移
                  if(l>$(this).width() - _this.$shadow.width()){
                    l=$(this).width() - _this.$shadow.width();
                  }
                  // 防止遮罩超出上边,到0不继续偏移
                  if(t<0){
                    t=0;
                  }
                  // 防止遮罩超出下边,到可视区-遮罩高度范围不继续偏移
                  if(t>$(this).height() - _this.$shadow.height()){
                    t=$(this).height() - _this.$shadow.height();
                  }
            
                  // 移动遮罩
                  // _this.$shadow.css({left:l,top:t});
                  _this.$shadow.css({transform: 'translate('+l+'px, '+t+'px)'});
                  
            
                  // 计算大图偏移量,用小图的偏移量比上小图的可视区宽度等于大图的偏移量比上大图尺寸,计算得出
                  bigl = -l*(_this.$bigImg.width()-_this.$big.width())/(_this.$small.width()-_this.$shadow.width())+'px'
                  bigt = -t*(_this.$bigImg.height()-_this.$big.height())/(_this.$small.height()-_this.$shadow.height())+'px';
            
                  // 移动大图
                  // _this.$bigImg.css({left:bigl,top:bigt});
                  _this.$bigImg.css({transform: 'translate('+bigl+', '+bigt+')'});
            
                });
              },
              // small事件
              'smallFn': function () {
                // 绑定this指向
                var _this = this;
                // 调用鼠标移入小图函数
                this.smallEnter();
                
                // 调用鼠标移出小图函数
                this.smallLeave();
                
                // 调用鼠标在小图内移动函数
                this.smallmove();
              }
            };
            // 初始化插件
            cloudzoom.init();
          });
          
        }
      });
    })(window,jQuery);
    

    案例html布局

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>    
          *{ margin:0; padding:0;}
          .contain{
              80%;
              height:500px;
              margin:0 auto;
          }
          .left{
              float:left;
          }
          .up{
              320px;
              height:200px;
              padding:30px;
          }
          /* .up{
              32em;
              height:20em;
              padding:3em;
          } */
          .down{
              padding:20px;
              padding-left:35px;
          }
          .down img{
              64px;
              height:40px;
              border:3px solid #ccc;
          }
          .down img.tab-active{
              64px;
              height:40px;
              border:3px solid #e60000;
          }
    
          .cloudzoom{
            position: relative;
          }
          .cloudzoom .cloudzoom-small{
            position: relative;
            cursor: move;
          }
          .cloudzoom .cloudzoom-small,.cloudzoom .cloudzoom-small img{
             100%;
            height: 100%;
          }
          .cloudzoom .cloudzoom-small img{
            display: block;
          }
          .cloudzoom .cloudzoom-shadow{
             200px;
            height: 200px;
            background: #ff0202;
            position: absolute;
            left:0;
            top:0;
            opacity: 0.4;
            filter:alpha(opacity:40);
            display: none;
          }
          .cloudzoom .cloudzoom-zoom-icon {
            height: 40px;
             40px;
            color: #ccc;
            z-index: 2;
            position: absolute;
            right: 0;
            bottom: 0;
            text-align: center;
            cursor: default;
            background: url(./images/zoom-icon.png) center  no-repeat rgba(255, 255, 255, .3);
            background-size: 20px;
          }
        </style>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/myjQuery/jquery.tab.js"></script>
        <script src="./js/jquery.cloudzoom.js"></script>
    </head>
    <body>
      <div class="contain tab1 tab">
        <div class="left">
          <div class="up">
            <div class="cloudzoom j-cloudzoom j-cloudzoom1">
              <div class="cloudzoom-small">
                <img src="./images/jd1.jpg" class="cloudzoom-small-img">
              </div>
            </div>
          </div>
          <div class="down">
              <img src="./images/jd1.jpg">
              <img src="./images/jd2.jpg">
              <img src="./images/jd3.jpg">
              <img src="./images/jd4.jpg">
          </div>
        </div>
      </div>
      <p>文字</p>
      
      <div class="contain tab2 tab">
        <div class="left">
          <div class="up">
            <div class="cloudzoom j-cloudzoom j-cloudzoom2">
              <div class="cloudzoom-small">
                <img src="./images/jd1.jpg" class="cloudzoom-small-img">
              </div>
            </div>
          </div>
          <div class="down">
              <img src="./images/jd5.jpg">
              <img src="./images/jd6.jpg">
              <img src="./images/jd3.jpg">
          </div>
        </div>
      </div>
      <script>
    
        $(function () {
          
          $('.tab').tab({'btn':'.down img',callback:function(){
            var str = $(this)[0].$tab.eq($(this)[0].index).attr('src');
            $(this)[0].$el.find('.cloudzoom-small-img').attr('src',str);
            $('.j-cloudzoom').cloudzoom();
          }});
          $('.j-cloudzoom').cloudzoom();
          // console.log($('.j-cloudzoom'));
          
        });
    
      </script>
    </body>
    </html>
    

    插件使用方法

    在页面中引入jquery和jquery.cloudzoom.js文件(根据项目目录引入必要文件)。

    
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/jquery.cloudzoom.js"></script>
    

    HTML结构

    
    <div class="cloudzoom j-cloudzoom j-cloudzoom1">
         <div class="cloudzoom-small">
             <img src="./images/jd1.jpg" class="cloudzoom-small-img">
         </div>
    </div>
    

    初始化插件

    在页面DOM元素加载完毕之后,通过cloudzoom()方法来初始化该插件。

    $('.j-cloudzoom').cloudzoom();
    

    插件配置参数

    • smallEl : 存放缩略图的元素,不能省略jq获取元素时候的#、. ,默认值:.cloudzoom-small
    • bigWidth : 大图盒子可视窗口宽度,不带单位的number,传值不能转换成数字,会被强制改成默认值,不传参数,默认就是小图的尺寸,默认值: 0
    • bigHeight : 大图盒子可视窗口高度,不带单位的number,传值不能转换成数字,会被强制改成默认值,不传参数,默认就是小图的尺寸,默认值: 0
    • bigoffsetTop : 大图盒子的距离顶部偏移位置,不带单位的number,传值不能转换成数字,会被强制改成默认值 ,默认值: 0
    • bigoffsetLeft : 大图盒子的距离左侧偏移位置,不带单位的number,传值不能转换成数字,会被强制改成默认值,默认值: 0
    • scale : 设置小图放大倍数后的数值给大图用,不带单位的number,传值不能转换成数字,会被强制改成默认值,默认值: 2
  • 相关阅读:
    Atitit 经济学常见的流派 古典主义与凯恩斯主义
    Atitit 学习方法 体系化学习方法 Excel 科目,分类,专业 三级分类。。 知识点。。 课程就是每一个知识点的详细化。。 比如经济学 类别 专业 xx概论知识点 3、金
    atiitt it学科体系化 体系树与知识点概念大总结.xlsx
    Atitit 减少财政支出普通人如何蹭政府补贴措施 attilax大总结.docx
    Atitit 信用管理概论 attilax学习心得
    Atitit.月度计划日程表 每月流程表v5
    Atitit 企业6大职能 attilax总结
    Atitit 常见每日流程日程日常工作.docx v8 ver ampm imp 签到 am y 天气情况检查 am y 晨会,每天或者隔天 am 每日计划(项目计划,日计划等。 am
    Atitit 财政赤字解决方案
    Atitit 建设自己的财政体系 attilax总结 1.1. 收入理论 2 1.2. 收入分类 2 1.3. 2 1.4. 非货币收入 2 1.5. 2 1.6. 降低期望 2 1.7.
  • 原文地址:https://www.cnblogs.com/jiaoshou/p/13269078.html
Copyright © 2011-2022 走看看