h5 code to achieve magnifying glass effect-H5 Tutorial-php.cn

h5 code to achieve magnifying glass effect

不言

Release： 2018-07-24 10:21:27

Original

3471 people have browsed it

The content shared with you in this article is about the h5 code to achieve the magnifying glass effect. The content is of great reference value. I hope it can help friends in need.

The artwork magnification effect recently made by the company is somewhat different from the previous Taobao magnifying glass effect. This needs to be magnified on this picture

<html>
<head>
  <meta charset="UTF-8">
  <style type="text/css">
    *{margin:0;padding:0}
    .demo{width: 680px;height: 480px;position:relative;background:#333;margin:20px auto;overflow:hidden;}
    .small_box{position:absolute;/*left:100px;*/top: 0;/*height: 480px;*/}
    .big_box{width: 100px;height: 100px;border:1px solid #999;background:url(./images/cc.jpg) no-repeat;position:absolute;top: 0;left: 0;border-radius:50%;cursor:none;display:none;box-shadow: 0px 0px 8px #000;}
  </style>
</head>
<body>
  <p id="demo" class="demo">
    <img id="small_box" class="small_box" src="images/cc.jpg"/>
    <p id="big_box" class="big_box">
    </p>
  </p>
  <script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
  <script type="text/javascript">
    $(function(){
      (function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
      // 画原本的宽高
      var origin_img = new Image();
      origin_img.src = $('.small_box').attr('src');
      var origin_w = origin_img.width;
      var origin_h = origin_img.height;
      // 计算画缩放的宽高
      var now_h = 480;
      var now_w = (origin_w/origin_h)*now_h;
      $('.small_box').css({'left':(680 -now_w)/2+'px','height':now_h+'px'})
      console.log($('.small_box').offset().left);
      $('#demo')[0].onmousemove = function(ev){
        var _event=ev||window.event;
        var x = _event.pageX||_event.clientX,
            y = _event.pageY||_event.clientY;
        var left=x- $('#big_box').width()/2 - $('.demo').offset().left ;
        var top=y - $('#big_box').width()/2 - $('.demo').offset().top ;
        $('#big_box')[0].style.left = left+ 'px';
        $('#big_box')[0].style.top = top + 'px';
        var percentX = ($('.small_box').offset().left -x)/now_w;
        var percentY = ($('.small_box').offset().top -y)/now_h;
        $('.big_box').css({
          'background-position-x':percentX*origin_w  + $('#big_box').width()/2+'px',
          'background-position-y':percentY*origin_h  + $('#big_box').height()/2+'px'
        })
      }
      // 滚轮滚动
      $('.big_box').on('mousewheel',function(_event,delta){
        var x = _event.pageX||_event.clientX,
            y = _event.pageY||_event.clientY;
        var left=x- $('#big_box').width()/2 - $('.demo').offset().left ;
        var top=y - $('#big_box').width()/2 - $('.demo').offset().top ;
        var targe_w = $(this).width();
        var targe_h = $(this).height();
        if (delta>0) {
          targe_w += 3;
          targe_h += 3;
          $('#big_box')[0].style.left = left -3+ 'px';
          $('#big_box')[0].style.top = top -3 + 'px';
        }else{
          targe_w -= 3;
          targe_h -= 3;
          $('#big_box')[0].style.left = left +3+ 'px';
          $('#big_box')[0].style.top = top +3 + 'px';
        }
        $(this).width(targe_w);
        $(this).height(targe_h);
      })
      //显示放大镜
      $('.demo').on('mouseover',function(){
        $('#big_box').show();
      });
      $('.demo').on('mouseout',function(){
        $('#big_box').hide();
      });
    })
  </script>
  <br/> <br/> <br/> <br/> <br/>
</body>
</html>

Copy after login

Related recommendations:

HTML5 Canvas realizes the special effects of fireworks blooming

canvas realizes the effects of love and rainbow rain

The above is the detailed content of h5 code to achieve magnifying glass effect. For more information, please follow other related articles on the PHP Chinese website!