suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie mit jquery einen Lupeneffekt

So erstellen Sie mit jquery einen Lupeneffekt

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

Dieses Mal zeige ich Ihnen, wie Sie mit jquery einen Lupeneffekt erzeugen und welche Vorsichtsmaßnahmen es gibt, um mit jquery einen Lupeneffekt zu erzeugen Ein praktischer Fall, werfen wir einen Blick darauf.

Zwei in JQuery geschriebene Lupeneffekte ohne Verwendung von Plug-Ins. Konditionierung und Klarheit des Denkens. Es ist nicht mit der objektorientierten-Methode geschrieben und daher für Anfänger einfacher zu verstehen. Schauen wir uns ohne weiteres den Code an. Die Bilder werden hier nicht hochgeladen, Sie können sie selbst finden. Es ist am besten, das Verhältnis zu finden, damit die Wirkung besser ist. 

<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;); 
        }); 
      }        
    });

Die oben genannten werden häufig verwendet folgende Es wird basierend auf dem Originalbild vergrößert

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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite!

Empfohlene Lektüre:

jquery fügt gestaltete HTML-Tags hinzu

Wie Jquery Ereignisse an dynamisch generierte Tags bindet

Wie jQuery den Wert des Tag-Unterelements erhält

Wie jQuery den Wert im P-Tag erhält und ändert

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit jquery einen Lupeneffekt. 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：So erhalten Sie einen Nicht-Interline-Stil mithilfe der CSS-Funktion mit variablen ParameternNächster Artikel：So erhalten Sie einen Nicht-Interline-Stil mithilfe der CSS-Funktion mit variablen Parametern

In Verbindung stehende Artikel

Mehr sehen