Heim > Artikel > Web-Frontend > h5-Code, um einen Lupeneffekt zu erzielen

h5-Code, um einen Lupeneffekt zu erzielen

不言Original: 2018-07-24 10:21:273437Durchsuche

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, handelt vom H5-Code zur Erzielung des Lupeneffekts. Der Inhalt ist von großem Referenzwert und kann Freunden in Not helfen.

Der kürzlich von der Firma erstellte Kunstvergrößerungseffekt unterscheidet sich etwas vom vorherigen Taobao-Lupeneffekt. Dieser muss auf diesem Bild vergrößert werden

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

Verwandte Empfehlungen:

HTML5 Canvas realisiert die Spezialeffekte von blühenden Feuerwerken

Canvas realisiert die Effekte von Liebe und Regenbogenregen

Das obige ist der detaillierte Inhalt vonh5-Code, um einen Lupeneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：H5 WeChat-Zahlungslösung für das Scheitern der Einführung des js-sdk-Pakets von WeChatNächster Artikel：H5 WeChat-Zahlungslösung für das Scheitern der Einführung des js-sdk-Pakets von WeChat

In Verbindung stehende Artikel

Mehr sehen