search

Home >Web Front-end >JS Tutorial >How to create a magnifying glass effect using jquery

How to create a magnifying glass effect using jquery

php中世界最好的语言
php中世界最好的语言Original
2018-03-14 16:50:351705browse

This time I will show you how to use jquery to create a magnifying glass effect, what are the precautions for using jquery to create a magnifying glass effect, the following is a practical case, let’s take a look .

The two magnifying glass effects written in jquery do not use plug-ins. Conditioning and clarity of thought. It is not written in an object-oriented way, so it is easier for beginners to understand. Without further ado, let’s look at the code. The pictures will not be uploaded here, you can find them by yourself. It is best to find the proportion, so the effect is better. 

<body> 
  <p id="father"> 
    <p id="container"> 
      <img src="img/400_1.jpg" style="display: block;"> 
      <img src="img/400_2.jpg" > 
      <p class="shade"></p> 
    </p> 
    <p class="small first"><img src="img/50_1.jpg"></p> 
    <p class="small second"><img src="img/50_2.jpg"></p> 
  </p>    
  <p class="big"> 
    <img src="img/800_1.jpg" style="display: block;"> 
    <img src="img/800_2.jpg"> 
  </p> 
</body>

css code

*{padding: 0; margin: 0;} 
  #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
  #father .second{left: 70px;} 
  .third{left: 140px;} 
  #father{position: relative; top: 100px; left: 50px; height: 460px;} 
  #container{position: absolute; width: 400px; height: 400px;} 
  #container img{position: absolute; display: none;} 
 
  .shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0; 
    left: 0; display: none;} 
  .big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;} 
  .big img{width: 800px; height: 800px; position: absolute; display: none;}

js code

<script type="text/javascript" src=&#39;js/jquery-1.12.4.min.js&#39;></script> 
  <script type="text/javascript"> 
    $(function () {  
      changePic(&#39;.first&#39;,0); 
      changePic(&#39;.second&#39;,1);  
      var shadeWidth = $(&#39;.shade&#39;).width(),//阴影的宽度 
        shadeHeight = $(&#39;.shade&#39;).height(),//阴影的高度 
        middleWidth = $(&#39;#container&#39;).width(),//容器的宽度 
        middleHeight = $(&#39;#container&#39;).height(),//容器的高度 
        bigWidth = $(&#39;.big&#39;).width(),//放大图片盒子的宽度 
        bigHeight = $(&#39;.big&#39;).height(),//放大图片盒子的高度 
        rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例 
        rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例  
      //当鼠标移入与移出时阴影与放大去显现/消失 
      $(&#39;#container&#39;).hover(function() { 
        $(&#39;.shade&#39;).show(); 
        $(&#39;.big&#39;).show(); 
      }, function() { 
        $(&#39;.shade&#39;).hide(); 
        $(&#39;.big&#39;).hide(); 
      }).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动  
        //记录下光标距离页面的距离 
        var x = e.pageX, 
          y = e.pageY; 
        //设置遮罩层的位置 
        $(&#39;.shade&#39;).offset({ 
          top: y-shadeHeight/2, 
          left: x-shadeWidth/2 
        });     
        //获取遮罩层相对父元素的位置 
        var cur = $(&#39;.shade&#39;).position(), 
          _top = cur.top, 
          _left = cur.left, 
          hdiffer = middleHeight - shadeHeight, 
          wdiffer = middleWidth - shadeWidth;  
        if (_top < 0) _top = 0; 
        else if (_top > hdiffer) _top = hdiffer; 
        if (_left < 0) _left = 0; 
        else if (_left > wdiffer) _left =wdiffer;  
        //判断完成后设置遮罩层的范围 
        $(&#39;.shade&#39;).css({ 
          top: _top, 
          left: _left 
        }); 
        //设置放大区图片移动 
        $(&#39;.big img&#39;).css({ 
          top: - rateY*_top, 
          left: - rateX*_left 
        });  
      });; 
      //封装的改变图片显示的函数 
      function changePic (element,index) { 
        $(element).click(function() { 
          $(&#39;#container img&#39;).eq(index).css(&#39;display&#39;, &#39;block&#39;).siblings().css(&#39;display&#39;, &#39;none&#39;); 
          $(&#39;.big img&#39;).eq(index).css(&#39;display&#39;, &#39;block&#39;).siblings().css(&#39;display&#39;, &#39;none&#39;); 
        }); 
      }        
    });

The above are commonly used, the following one is enlarged based on the original image of

htm

<body> 
  <p id="father"> 
    <p id="container"> 
      <img src="img/400_1.jpg" style="display: block;"> 
      <img src="img/400_2.jpg" > 
      <img src="img/400_3.jpg" > 
      <p class="shade"> 
        <img src="img/800_1.jpg" style="display: block;"> 
        <img src="img/800_2.jpg"> 
        <img src="img/800_3.jpg"> 
      </p> 
    </p> 
    <p class="small first"><img src="img/50_1.jpg"></p> 
    <p class="small second"><img src="img/50_2.jpg"></p> 
    <p class="small third"><img src="img/50_3.jpg"></p> 
  </p> 
</body>

css code

*{padding: 0; margin: 0;} 
    #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} 
    #father .second{left: 70px;} 
    .third{left: 140px;} 
    #father{position: relative; top: 100px; left: 50px; height: 460px;} 
    #container{position: absolute; width: 400px; height: 400px;} 
    #container img{position: absolute; display: none;} 
    .shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;} 
    .shade img{display: none; width: 800px; height: 800px; position: absolute;}

js code

<span style="white-space:pre">  </span><script type="text/javascript" src=&#39;js/jquery-1.12.4.min.js&#39;></script> 
  <script type="text/javascript"> 
    $(function () { 
      changePic(&#39;.first&#39;,0); 
      changePic(&#39;.second&#39;,1); 
      changePic(&#39;.third&#39;,2); 
      var shadeWidth = $(&#39;.shade&#39;).width(),//阴影的宽度 
        shadeHeight = $(&#39;.shade&#39;).height(),//阴影的高度 
        middleWidth = $(&#39;#container&#39;).width(),//容器的宽度 
        middleHeight = $(&#39;#container&#39;).height(),//容器的高度 
        bigImgWidth = $(&#39;.shade img&#39;).width(),//放大图片盒子的宽度 
        bigImgHeight = $(&#39;.shade img&#39;).height(),//放大图片盒子的高度 
        rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2 
        rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2  
      //当鼠标移入与移出时阴影与放大去显现/消失 
      $(&#39;#container&#39;).hover(function() { 
        $(&#39;.shade&#39;).show(); 
        $(&#39;.big&#39;).show(); 
      }, function() { 
        $(&#39;.shade&#39;).hide(); 
        $(&#39;.big&#39;).hide(); 
      }).mousemove(function(e) {//当鼠标移动时，阴影和放大区图片进行移动         
        //记录下光标距离页面的距离 
        var x = e.pageX, 
          y = e.pageY;  
        //设置遮罩层的位置 
        $(&#39;.shade&#39;).offset({ 
          top: y-shadeHeight/2, 
          left: x-shadeWidth/2 
        });     
        //获取遮罩层相对父元素的位置 
        var cur = $(&#39;.shade&#39;).position(), 
          _top = cur.top, 
          _left = cur.left, 
          hdiffer = middleHeight - shadeHeight, 
          wdiffer = middleWidth - shadeWidth;  
        if (_top < 0) _top = 0; 
        else if (_top > hdiffer) _top = hdiffer; 
        if (_left < 0) _left = 0; 
        else if (_left > wdiffer) _left =wdiffer;  
        //判断完成后设置遮罩层的范围 
        $(&#39;.shade&#39;).css({ 
          top: _top, 
          left: _left 
        });           
        //设置放大区图片移动 
        $(&#39;.shade img&#39;).css({ 
          top: - _top*rateY*3/2, 
          left: - _left*rateX*3/2 
        });  
      });;  
      //封装的改变图片显示的函数 
      function changePic (element,index) { 
        $(element).click(function() { 
          $(&#39;#container img&#39;).eq(index).css(&#39;display&#39;, &#39;block&#39;).siblings().css(&#39;display&#39;, &#39;none&#39;); 
          $(&#39;.shade img&#39;).eq(index).css(&#39;display&#39;, &#39;block&#39;).siblings().css(&#39;display&#39;, &#39;none&#39;); 
        }); 
      }        
    }); 
<span style="white-space:pre">  </span></script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jquery adds HTML tags with styles

##How jquery binds events to dynamically generated tags

How does jQuery get the value of the tag sub-element

How does jQuery get and modify the value of the P tag

The above is the detailed content of How to create a magnifying glass effect using jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to obtain non-interline style using variable parameter css functionNext article：How to obtain non-interline style using variable parameter css function

Related articles

See more