code h5 pour obtenir un effet loupe-Tutoriel H5-php.cn

code h5 pour obtenir un effet loupe

不言

Libérer： 2018-07-24 10:21:27

original

3501 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article concerne le code h5 pour obtenir l'effet loupe. Le contenu a une grande valeur de référence. J'espère qu'il pourra aider les amis dans le besoin.

L'effet de grossissement de l'œuvre d'art récemment réalisé par la société est quelque peu différent du précédent effet de loupe Taobao. Il doit être agrandi sur cette image

<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>

Copier après la connexion

Recommandations associées :

<.>

La toile HTML5 réalise les effets spéciaux des feux d'artifice qui fleurissent

la toile réalise les effets de l'amour et de la pluie arc-en-ciel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!