h5实现放大镜效果的代码

最近公司做的艺术品放大效果，和以往的淘宝放大镜效果有些不同，这个需要在本图上放大

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>
    

相关推荐：

HTML5 canvas实现烟花绽放的特效

canvas实现爱心和彩虹雨的效果

以上就是h5实现放大镜效果的代码的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！