首页 > 代码库 > JQUERY实现放大镜

JQUERY实现放大镜

2024-08-19 09:07:50   218人阅读

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      position: relative;
    }

    #left {
      width: 430px;
      height: 430px;
      position: relative;

    }

    #inner {
      display: none;
      width: 231px;
      height: 231px;
      background-image: url(../images/21_03.png);
      opacity: 0.7;
      position: absolute;
      left: 0;
      top: 0;
    }

    #tags li {
      width: 60px;
      height: 60px;
      list-style: none;
      float: left;
    }

    #right {
      width: 430px;
      height: 430px;
      /*border: 1px solid red;*/
      position: absolute;
      left: 500px;
      top: 0;
      overflow: hidden;
    }
    #right img{
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="left">
      <img src=http://www.mamicode.com/"../images/imgA_2.jpg">
      <div id="inner"></div>
    </div>
    <ul id="tags">
      <li><img src=http://www.mamicode.com/"../images/imgA_1.jpg"></li>
      <li><img src=http://www.mamicode.com/"../images/imgB_1.jpg"></li>
      <li><img src=http://www.mamicode.com/"../images/imgC_1.jpg"></li>
      <li><img src=http://www.mamicode.com/"../images/imgD_1.jpg"></li>
    </ul>
    <div id="right"></div>
  </div>
  <script src=http://www.mamicode.com/"../js/jquery-1.12.4.js"></script>

  <script >
$(function(){
    var setPosition;
    if((/IE [678]/).test(navigator.userAgent)){
        setPosition=function(JDOM,x,y){
            JDOM.css({
                left:x+‘px‘,
                top:y+‘px‘
            });
        }
    }else{
        setPosition=function(JDOM,x,y){
            JDOM.css({
                transform:‘translate(‘+x+‘px,‘+y+‘px)‘,
                WebkitTransform:‘translate(‘+x+‘px,‘+y+‘px)‘,
                MozTransform:‘translate(‘+x+‘px,‘+y+‘px)‘,
                OTransform:‘translate(‘+x+‘px,‘+y+‘px)‘,
                msTransform:‘translate(‘+x+‘px,‘+y+‘px)‘
            })
        }
    }
    $(‘#tags‘).on(‘mouseenter‘,‘li img‘,function(){
        var imgPath=$(this).prop(‘src‘);
        //console.log(newPath);
        var newImgPath=imgPath.replace(/_1/,‘_2‘);
        //console.log(newImgPath);
        $(‘#left img‘).prop(‘src‘,newImgPath);
    });

    $(‘#left‘).on(‘mouseenter‘,function(){
        $(‘#inner‘).show();
        var imgPath=$(‘#left img‘).prop(‘src‘);
        $(‘<img>‘).prop(‘src‘,imgPath.replace(/_2/,‘_3‘)).appendTo($(‘#right‘));

    }).on(‘mousemove‘,‘#inner‘,function(event){
        var x=event.pageX-115.5-$(‘#left‘).offset().left;
        if(x<0){
            x=0;
        }else if(x>199){
            x=199;
        }
        var y=event.pageY-115.5-$(‘#left‘).offset().top;
        if(y<0){
            y=0;
        }else if(y>199){
            y=199;
        }
        setPosition($(‘#inner‘),x,y);
        setPosition($(‘#right img‘),-x*800/430,-y*800/430);
    }).on(‘mouseleave‘,function(){
        $(‘#inner‘).hide();
        $(‘#right‘).hide();    });});

</script>
</body>
</html>

JQUERY实现放大镜


联系
我们