自制放大镜效果的jq插件

基于jquery的放大镜效果实现

• 首先在html页面引入jquery和提前建好的插件文件

	<script src="js/jquery.js"></script>
	<script src="js/jq_放大镜.js"></script>

• html的结构是这样的

	<div class="data-l">
          <div class="mirror mirror-white">

          </div>
          <div class="mirror mirror-black">

          </div>
 	</div>

data-l是放置图片的大框
mrrior-white是鼠标移入图片时出现的跟随框
mirror-black时鼠标移入图片区域时右侧出现的放大显示的图片框

• css样式如下

#d-data .data-l {
    position: relative;
     }
     #d-data .data-l .mirror{
      position: absolute;width:100px;height:100px;border-radius: 12px;display: none;
       }
       #d-data .data-l .mirror-white{
         background:rgba(255,255,255,.5);
         }
         #d-data .data-l .mirror-black{
          background:#000;left:370px;overflow:hidden;width:150px;height:150px;
          }
          #d-data .data-l .mirror-black img{
            position: absolute;width:600px;
            }
    #d-data .data-l img {
      width: 360px; border-radius: 12px;}

• 设置好预想的样式后书写的js代码如下

//放大镜效果
    $('.data-l').hover(function(e){
        $('.mirror-black').show();
        $('.mirror-white').css({
            display:'block'
        });
        $('html').on('mousemove',function(e){
            let x=e.pageX-$('.mirror-white').width()/2-$('.data-l').offset().left;
            let y=e.pageY-$('.mirror-white').width()/2-$('.data-l').offset().top;
            if(x<=0){
                x=0;
            }
            if(x>=$('.data-l').width()-$('.mirror-white').width()){
                x=$('.data-l').width()-$('.mirror-white').width();
            }
            if(y<=0){
                y=0;
            }
            if(y>=$('.data-l').height()-$('.mirror-white').width()){
                y=$('.data-l').height()-$('.mirror-white').width();
            }
            $('.mirror-white').css({
                left:x+'px',
                top:y+'px',
            });
            $('.mirror-black').children('img').css({
                left:-5*x/3+'px',  //此处的5/3为600/360，也就是右边小框内的图片大小比左边显示的图片大小
                top:-5*y/3+'px'
            })
        });
    },function(){
        $('.mirror-black').hide();
        $('.mirror-white').css({
            display:'none'
        });
        $('html').off('mousemove');
    });

• 最后效果如下
  
  总的来说使用jq写放大镜插件还是要比原生js写方便不少