两种放大镜组件

2019独角兽企业重金招聘Python工程师标准>>>

/*
*调用的元素必须是要操作的图片
*功能 提供移动鼠标放大和滚轮放大功能,以及滚轮放大时能移动图片
*参数 type:选择放大方式,scroll 滚轮放大;mousemove 移动鼠标放大,必须填
*参数 multiple:放大倍数 取值范围 大于等于1,小于等于10,选填
*/
(function($,scope){
   $("head").append("<link>");
    css = $("head").children(":last");
    css.attr({
        rel: "stylesheet",
        type: "text/css",
        href: "magnify.css"
    });
   function ScrollMagnify(dom,multiple){
      var _that = this;
      _that.multiple = multiple; //放大倍数
      _that.width = $(dom).width();
      _that.height = $(dom).height();
      _that.dom = dom;
      _that.$imgBox = $(dom).parent();
      _that.isMoving = false; //移动状态,默认false
      _that.offsetX = 0;  //记录鼠标移动前x轴的位置
      _that.offsetY = 0;  //记录鼠标移动前y轴的位置
      _that.times = Math.pow(_that.multiple,0.2); //每次滚轮的放大倍数
   }

   //滚轮放大
   ScrollMagnify.prototype = {
      wheelNum : 0,
      initEvents:function(){
         var _that = this;
         addEvent(_that.dom, "mousewheel", function(event) {
            var offsetLeft = $(this).offset().left;
            var offsetTop = $(this).offset().top;

            var percentLeft = ((event.clientX - offsetLeft)/$(this).width()).toFixed(3);
            var percentTop = ((event.clientY - offsetTop)/$(this).height()).toFixed(3);

            var parentLeft = _that.$imgBox.offset().left;
            var parentTop = _that.$imgBox.offset().top;
            var currentWidth = $(this).width();
            if(event.delta > 0 && currentWidth < _that.width*_that.multiple){
               _that.wheelNum ++;             
               
               $(this).width($(this).width()*_that.times).height($(this).height()*_that.times);

               $(this).offset({left:event.clientX - $(this).width() * percentLeft,top:event.clientY - $(this).height() * percentTop});
            }else if(event.delta < 0 && _that.wheelNum >0){
               _that.wheelNum --;
               
               $(this).width($(this).width()/_that.times).height($(this).height()/_that.times);

               var currentLeft = event.clientX - $(this).width() * percentLeft;
               var currentTop = event.clientY - $(this).height() * percentTop;

               currentLeft = currentLeft >parentLeft ? parentLeft : currentLeft;
               currentTop = currentTop >parentTop ? parentTop : currentTop;

               currentLeft = (currentLeft + $(this).width()) >=(parentLeft + _that.$imgBox.width()) ? currentLeft : (parentLeft + _that.$imgBox.width() - $(this).width());
               currentTop = (currentTop + $(this).height()) >=(parentTop + _that.$imgBox.height()) ? currentTop : (parentTop + _that.$imgBox.height() - $(this).height());
               $(this).offset({left:currentLeft,top:currentTop});
            }                 
         });

         //图片移动
         $(_that.dom).mousedown(function(){
            _that.isMoving = true;
         }).mouseup(function(){
            _that.isMoving = false;
            _that.offsetX = 0;
            _that.offsetY = 0;
         }).mousemove(function(e){
            if(_that.isMoving){                   
               var moveX = _that.offsetX === 0 ? 0 : e.clientX - _that.offsetX;
               var moveY = _that.offsetY === 0 ? 0 : e.clientY - _that.offsetY;

               var parentLeft = _that.$imgBox.offset().left;
               var parentTop = _that.$imgBox.offset().top;

               var currentLeft = $(this).offset().left + moveX;
               var currentTop = $(this).offset().top + moveY;

               //判断图片左边栏不能大于父元素左边栏
               currentLeft = currentLeft >parentLeft ? parentLeft : currentLeft;
               currentTop = currentTop >parentTop ? parentTop : currentTop;

                    //判断图片右边栏侧不能小于父元素右边栏
               currentLeft = (currentLeft + $(this).width()) >=(parentLeft + _that.$imgBox.width()) ? currentLeft : (parentLeft + _that.$imgBox.width() - $(this).width());
               currentTop = (currentTop + $(this).height()) >=(parentTop + _that.$imgBox.height()) ? currentTop : (parentTop + _that.$imgBox.height() - $(this).height());          

               $(this).offset({left:currentLeft,top:currentTop});
               
               _that.offsetX = e.clientX;
               _that.offsetY = e.clientY;

               return false;
            }
         }).mouseleave(function(){  //鼠标移出可见区
            if(_that.isMoving){
               _that.isMoving = false;
               _that.offsetX = 0;
               _that.offsetY = 0;
            }
            
         })

      }
   }

   function MoveMagnify($dom,multiple){
      var _that = this;
      _that.$ImgBox = $dom;
      _that.$Img = $dom.find('img');
      _that.multiple = multiple;
   }

   //移动鼠标放大
   MoveMagnify.prototype = {
      initEvents:function(){
         var _that = this;
         _that.$ImgBox.mouseenter(function(){
            //动态添加放大区域元素
            var html = '<div id="magnifyingBegin"></div><div id="magnifyingShow"><img src="111.png"></div>';
            _that.$Img.after(html);
            var NowSrc = _that.$Img.attr('src');
            var nowWidth = _that.$Img.width() * _that.multiple;
            var nowHeight = _that.$Img.height() *_that.multiple;
            $('#magnifyingBegin').width($('#magnifyingShow').width()/_that.multiple);
            $('#magnifyingBegin').height($('#magnifyingShow').height()/_that.multiple);
            $('#magnifyingShow').find('img').attr("src",NowSrc).width(nowWidth).height(nowHeight);
         });

         _that.$ImgBox.mousemove(function(e){
            $Drag = $('#magnifyingBegin');//拖动滑动容器
             $show = $('#magnifyingShow');//放大镜显示区域
             $showIMg = $show.find('img');//放大镜图片  

             var iX = e.pageX - _that.$ImgBox.offset().left - $Drag.width()/2,  
             iY = e.pageY - _that.$ImgBox.offset().top - $Drag.height()/2,   
             MaxX = _that.$ImgBox.width()-$Drag.width(),  
             MaxY = _that.$ImgBox.height()-$Drag.height();    
             iX = iX > 0 ? iX : 0;  
             iX = iX < MaxX ? iX : MaxX;  
             iY = iY > 0 ? iY : 0;  
             iY = iY < MaxY ? iY : MaxY;    
             $Drag.css({left:iX+'px',top:iY+'px'}); 

             var halfLeft = ($Drag.width()*_that.multiple - $show.width())/2;
             var halfTop = ($Drag.height()*_that.multiple - $show.height())/2;
             $showIMg.css({marginLeft:-_that.multiple*iX - halfLeft +'px',marginTop:-_that.multiple*iY - halfTop +'px'});   
         });  
         _that.$ImgBox.mouseleave(function(){ 
            $('#magnifyingBegin').remove();
            $('#magnifyingShow').remove();
         });
      }
      
   }


   $.fn.extend({  
      magnify:function(option){
         var type = (option !==undefined && option.type)  ? option.type :  'scroll'; //放大类型
         var multiple = (option!==undefined && option.multiple &&  option.multiple>=3 && option.multiple<=10) ? option.multiple : 3 ; //放大倍数
         var _that = $(this);
         if(type === 'scroll'){          
            _that.each(function(index,dom){
               $(this).css({cursor:'move'});
               var dom = $(this)[0];
               var instance = new ScrollMagnify(dom,multiple);
               instance.initEvents();
            })
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
         }else if(type ==='mousemove'){
            var $imgCon = _that.parent();//正常图片容器 
            $imgCon.each(function(index,dom){
               var $dom = $(this);
               var instance = new MoveMagnify($dom,multiple);
               instance.initEvents();
            });               
         }
      },
    });

   //滚轮事件,兼容性处理
   var addEvent = (function(window){
      var _eventCompat = function(event) {
         var type = event.type;
         if (type == 'DOMMouseScroll' || type == 'mousewheel') {
            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
         }
         if (event.srcElement && !event.target) {
            event.target = event.srcElement;    
         }
         if (!event.preventDefault && event.returnValue !== undefined) {
            event.preventDefault = function() {
               event.returnValue = false;
            };
         }
            return event;
        };

        if (window.addEventListener) {
           return function(el, type, fn, capture) {
              if (type === "mousewheel" && document.mozFullScreen !== undefined) {
                 type = "DOMMouseScroll";
              }
              el.addEventListener(type, function(event) {
                 fn.call(this, _eventCompat(event));
              }, capture || false);
           }
        } else if (window.attachEvent) {
           return function(el, type, fn, capture) {
              el.attachEvent("on" + type, function(event) {
                 event = event || window.event;
                 fn.call(el, _eventCompat(event));    
              });
           }
        }
    })(window);
})(jQuery,window);

 

css 如下

@CHARSET "UTF-8";#magnifyingBegin{left:0;top:0;background-color:#454545;opacity:0.5;position:absolute;cursor:move;}#magnifyingShow{width:300px;height:300px;position:absolute;right:-300px;top:0;overflow:hidden;background-color:#454545;z-index:999;;}#magnifyingShow > img{margin-left:0;margin-top:0}

转载于:https://my.oschina.net/niejianbo/blog/1581204