jQuery實(shí)現(xiàn)放大鏡案例

更新時間：2020年10月19日 17:02:39 作者：willard_cui

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)放大鏡案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

動畫：

1、鼠標(biāo)移入顯示區(qū)圖片時，顯示選擇框；

2、放大鏡特效，將圖片位于選擇框內(nèi)的部分放大顯示；

3、點(diǎn)擊下方小圖片和左右移動按鈕時正確的顯示圖片

實(shí)現(xiàn)方法：

1、放大效果：放大區(qū)的與顯示區(qū)使用相同的圖片，并設(shè)置放大區(qū)圖片的長寬為顯示區(qū)的二倍；

2、選擇框拖動效果：鼠標(biāo)移動時獲得鼠標(biāo)的坐標(biāo)，并根據(jù)選擇框的和圖片的offset()屬性計(jì)算出選擇框的新位置。同時修改放大區(qū)圖片的位置，使其與選擇框內(nèi)的部分對應(yīng)；

3、點(diǎn)擊小圖片效果：修改小圖片的class改變其樣式，同時修改顯示區(qū)和放大區(qū)圖片的src顯示對應(yīng)的圖片；

4、左移按鈕：點(diǎn)擊時通過each函數(shù)找到當(dāng)前顯示的圖片，然后判斷是否為第一張圖片，如果是第一張圖片則將最后一張圖片設(shè)置為要顯示的圖片，修改其樣式，同時修改顯示區(qū)和放大區(qū)圖片的src顯示對應(yīng)的圖片。若果不是第一張圖片，則將前一張圖片設(shè)置為要顯示的圖片，修改其樣式，同時修改顯示區(qū)和放大區(qū)圖片的src顯示對應(yīng)的圖片；

5、右移按鈕：原理有左移按鈕相同。

（詳見下方代碼）

動畫效果：

<!DOCTYPE html>
 
<head>
 <meta charset="UTF-8">
 <title>放大鏡</title>
 <script src="../jquery.min.js"></script>
 <link rel="stylesheet" href="style.css" >
</head>
<body>
<div id="container">
 <div class="box">
 <div class="normal"><img src="images/1.jpg" alt="圖片">
 <div class="kuang"></div>
 </div>
 <div class="small">
  <div class="left"><img src="images/left.gif" alt="left"></div>
  <div class="right"><img src="images/right.gif" alt="right"></div>
  <div class="item">
  <ul>
  <li class="selected"><img src="images/1.jpg" alt="圖片"></li>
  <li><img src="images/2.jpg" alt="圖片"></li>
  <li><img src="images/3.jpg" alt="圖片"></li>
  <li><img src="images/4.jpg" alt="圖片"></li>
  <li><img src="images/5.jpg" alt="圖片"></li>
  </ul>
  </div>
 </div>
 </div>
 <div class="big"><img src="images/1.jpg" alt="圖片"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

css代碼

*{
 margin: 0;
 padding: 0;
 list-style: none;
}
#container{
 margin: 50px auto;
 width: 1000px;
 
}
.box{
 position: relative;
 float: left;
 width: 400px;
 height: 380px;
}
.normal{
 position: relative;
 
 width: 400px;
 height: 300px;
}
.normal img{
 width: 400px;
 height: 300px;
}
.small{
 margin-top: 10px;
 width: 400px;
 height: 60px;
 
}
.small .left{
 position: relative;
 float: left;
 width: 10px;
 height: 60px;
}
.small .right{
 position: relative;
 float: right;
 width: 10px;
 height: 60px;
}
.item ul li{
 position: relative;
 float: left;
 margin-left: 5px;
 padding: 1px;
 width: 66px;
 height: 40px;
 border: 1px solid #ccc;
}
.item ul li img{
 
 width: 100%;
 height:100%;
}
.big{
 display: none;
 position: relative;
 float: left;
 margin-left: 20px;
 width: 400px;
 height: 300px;
 overflow: hidden;
}
.big img{
 position: relative;
 left: 0;
 top: 0;
 width: 800px;
 height: 600px;
}
.box .kuang{
 display: none;
 position: absolute;
 left: 0;
 top: 0;
 width: 200px;
 height: 150px;
 opacity: 0.5;
 background: #00f;
}
.item ul .selected{
 border: 1px solid orange;
}

jQuery代碼

$(document).ready(function () {
 //當(dāng)鼠標(biāo)進(jìn)入圖片時顯示放大框和放大圖像
 $(".normal").mouseenter(function () {
 $(".kuang").show();
 $(".big").show();
 })
 //當(dāng)鼠標(biāo)離開圖片時隱藏放大框和放大圖像
 $(".normal").mouseleave(function () {
 $(".kuang").hide();
 $(".big").hide();
 })
 //按下鼠標(biāo)拖動放大框，右側(cè)放大顯示圖片位于放大框內(nèi)的部分
 $(".kuang").mousedown(function (e) {
 x=e.pageX-$(this).offset().left;
 y=e.pageY-$(this).offset().top;
 // console.log($(this).offset().top);
 //console.log(y);
 $(document).on("mousemove",function(e){
  
  var _x=e.pageX-x-$(".box").offset().left;
  var _y=e.pageY-y-$(".box").offset().top;
 
  //設(shè)置_x和_y的范圍
  if (_x<0){
  _x=0;
  }else if (_x>200){
  _x=200;
  }
  if (_y<0){
  _y=0;
  } else if(_y>150){
  _y=150;
  }
  $(".kuang").css({"left": _x, "top": _y});
  $(".big img").css({"left":-2*_x,"top":-2*_y});
 })
 })
 //鼠標(biāo)抬起時停止取消拖動
 $(document).mouseup(function () {
 $(document).off("mousemove");
 })
 //點(diǎn)擊左側(cè)下方小圖片時，左側(cè)上方顯示相應(yīng)的圖片，且左側(cè)放大區(qū)也更改為與小圖片對應(yīng)的圖片
 $(".item ul li img").click(function () {
 $(this).parent().addClass("selected")
 $(this).parent().siblings().removeClass("selected");
 $(".normal img").attr("src",$(this).attr("src"));
 $(".big img").attr("src",$(this).attr("src"));
 
 });
 //點(diǎn)擊向左按鈕，選中當(dāng)前顯示圖片的前一張圖片，小圖片樣式做相應(yīng)的修改。圖片顯示區(qū)和右側(cè)圖片放大區(qū)都改為前一張圖片
 $(".left").click(function () {
 $(".small li").each(function (index,value) {
  if($(value).attr("class")=="selected"){
  //如果當(dāng)前顯示第一張圖片，則點(diǎn)擊向左按鈕時顯示最后一張圖片
  if(index==0){
   $(value).removeClass("selected")
   $(".small li").eq(4).addClass("selected");
   $(".normal img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
   $(".big img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
   return false;
  }
  if (index>0) {
   $(value).removeClass("selected").prev().addClass("selected");
   console.log($(value).prev().children().eq(0).attr("src"));
   $(".normal img").attr("src",$(value).prev().children().eq(0).attr("src"));
   $(".big img").attr("src",$(value).prev().children().eq(0).attr("src"));
  }
  }
 
 })
 
 });
 //點(diǎn)擊向右按鈕，選中當(dāng)前顯示圖片的下一張圖片，小圖片樣式做相應(yīng)的修改。圖片顯示區(qū)和右側(cè)圖片放大區(qū)都改為下一張圖片
 $(".right").click(function () {
 $(".small li").each(function (index,value) {
  if($(value).attr("class")=="selected"){
  //如果當(dāng)前顯示最后一張圖片，則點(diǎn)擊向右按鈕時顯示第一張按鈕
  if(index==4){
   $(value).removeClass("selected")
   $(".small li").eq(0).addClass("selected");
   $(".normal img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
   $(".big img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
   return false;
  }
  if (index<4) {
   $(value).removeClass("selected").next().addClass("selected");
   $(".normal img").attr("src",$(value).next().children().eq(0).attr("src"));
   $(".big img").attr("src",$(value).next().children().eq(0).attr("src"));
   return false;
  }
  }
 
 })
 
 });
 
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: