js實現商品列表及放大鏡效果

本文轉載自查看原文 2019-09-28 21:20 343 JavaScript/ 前端/ 案例

根據商品列表的索引值來控制小圖的切換，但是由於大圖不能直接索引，所以可以通過對小圖的索引值間接索引來控制大圖的切換；

在利用鼠標進入以及移動實現放大鏡的效果。

效果圖：

html以及css代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .small_img
 8         {
 9             width: 350px;
10             height: 350px;
11             border: 1px solid #999999;
12             position: relative;
13         }
14         .mask
15         {
16             width: 153px;
17             height: 153px;
18             background-color: rgba(255,192,0,0.3);
19             position: absolute;
20         }
21         .big_img{
22             width: 350px;
23             height: 350px;
24             position: absolute;
25             left:360px;
26             top:8px;
27             border: 1px solid #999999;
28         }
29         .leftBn
30         {
31             position: relative;
32             left:0;
33             width: 22px;
34             height: 32px;
35             background: url("img/prev.png");
36             float: left;
37             top:15px;
38         }
39         .rightBn
40         {
41             position: relative;
42             width: 22px;
43             height: 32px;
44             background: url("img/sprite.png") -78px 0;
45             float: left;
46             top:15px;
47         }
48         .iconCon
49         {
50             margin-top: 20px;
51             width: 350px;
52             height: 58px;
53         }
54         .iconList
55         {
56             width: 290px;
57             height: 58px;
58             float: left;
59             position: relative;
60             overflow: hidden;
61         }
62         .iconImgList
63         {
64             width: 348px;
65             font-size: 0;
66             height: 58px;
67             position: absolute;
68         }
69         .iconImgList img
70         {
71             border: 2px solid transparent;
72         }
73     </style>
74 </head>
75 <body>
76     <div>
77         <div class="small_img">
78             <div class="mask"></div>
79         </div>
80         <div class="big_img"></div>
81         <div class="iconCon">
82             <div class="leftBn"></div>
83             <div class="iconList">
84                 <div class="iconImgList">
85                 </div>
86             </div>
87             <div class="rightBn"></div>
88         </div>
89     </div>
90 </body>
91 </html>

js代碼：

獲取元素，對要操作的元素添加事件，設置當前圖片的索引

 1 let smallImg,bigImg,mask,iconImgList,leftBn,rightBn;
 2         let firstP,lastP,pre;
 3         //將商品圖片放入一個數組
 4         let list=["1_icon.jpg","2_icon.jpg","3_icon.jpg","4_icon.jpg","5_icon.jpg","6_icon.jpg"];
 5         init();
 6         function init() {
 7             //獲取小圖片的容器
 8             smallImg=document.querySelector(".small_img");
 9             //在小圖片上移動的方塊
10             mask=document.querySelector(".mask");
11             //獲取大圖片的容器
12             bigImg=document.querySelector(".big_img");
13             //獲取下方商品列表的容器
14             iconImgList=document.querySelector(".iconImgList");
15             //獲取切換商品列表的左右按鈕
16             leftBn=document.querySelector(".leftBn");
17             rightBn=document.querySelector(".rightBn");
18             //遍歷圖片，拿到當前圖片
19             for(let i=0;i<list.length;i++){
20                 let img=new Image();
21                 img.src="./img/"+list[i];
22                 iconImgList.appendChild(img);
23                 if(i===0){
24                     selectImg(img);
25                 }
26             }
27             setImage("./img/"+list[0].replace("_icon",""));
28             firstP=0;   
29             lastP=4;
30             //給小圖片添加鼠標事件
31             smallImg.addEventListener("mousemove",mouseHandler);
32             smallImg.addEventListener("mouseleave",mouseLeaveHandler);
33             smallImg.addEventListener("mouseenter",mouseLeaveHandler);
34             iconImgList.addEventListener("mouseover",imgSelectHandler);
35             //給左右按鈕添加點擊事件
36             leftBn.addEventListener("click",clickHandler);
37             rightBn.addEventListener("click",clickHandler);
38         }

設置當前選中的圖片以及實現放大鏡的效果，使放大鏡隨着鼠標移動。

 1 function imgSelectHandler(e) {
 2             //判斷當前事件源是不是商品列表中選中的圖片
 3             if(e.target===iconImgList) return;
 4             selectImg(e.target);
 5             setImage(e.target.src.replace("_icon",""));
 6 
 7         }
 8 
 9         function setImage(src) {
10             //設置當前選中的圖片
11             if(smallImg.children.length===1){
12                 let img=new Image();
13                 img.src=src;
14                 img.style.width="350px";
15                 img.style.height="350px";
16                 img.style.position="absolute";
17                 smallImg.insertBefore(img,smallImg.firstElementChild);
18             }else{
19                 smallImg.firstElementChild.src=src;
20             }
21             bigImg.style.backgroundImage=`url(${src})`;
22         }
23         function mouseLeaveHandler(e) {
24             //鼠標進入大圖顯示，離開隱藏
25             if(e.type==="mouseenter"){
26                 bigImg.style.display="block";
27             }else if(e.type==="mouseleave"){
28                 bigImg.style.display="none";
29             }
30         }
31         function mouseHandler(e) {
32             //設置當前方塊移動的距離
33             mask.style.left=e.x-mask.offsetWidth/2+"px";
34             mask.style.top=e.y-mask.offsetHeight/2+"px";
35             //實現小方塊移動時的邊界限定
36             if(mask.offsetLeft<0){
37                 mask.style.left="0px";
38             }
39             if(mask.offsetTop<0){
40                 mask.style.top="0px";
41             }
42             if(mask.offsetLeft+mask.offsetWidth>smallImg.offsetWidth){
43 
44                 mask.style.left=smallImg.offsetWidth-mask.offsetWidth+"px";
45             }
46             if(mask.offsetTop+mask.offsetHeight>smallImg.offsetHeight){
47                 mask.style.top=smallImg.offsetHeight-mask.offsetHeight+"px";
48             }
49             bigImg.style.backgroundPositionX=-mask.offsetLeft*(800/350)+"px";
50             bigImg.style.backgroundPositionY=-mask.offsetTop*(800/350)+"px";
51         }

點擊左右按鈕，切換下面的商品列表

 1 function clickHandler(e) {
 2             //點擊左邊按鈕，圖片依次換一張
 3             if(this===leftBn){
 4                 if(firstP-1<0) return;
 5                 firstP--;
 6                 lastP--;
 7                 iconImgList.style.left=-firstP*58+"px";
 8             }else if(this===rightBn){
 9                 if(lastP+1>list.length-1) return;
10                 lastP++;
11                 firstP++;
12                 iconImgList.style.left=-(lastP-4)*58+"px";
13             }
14         }
15         function selectImg(elem) {
16             if(pre){
17                 pre.style.border="2px solid transparent";
18             }
19             pre=elem;
20             pre.style.border="2px solid #e01222";
21         }

完整js代碼：

  1 <script>
  2         let smallImg,bigImg,mask,iconImgList,leftBn,rightBn;
  3         let firstP,lastP,pre;
  4         //將商品圖片放入一個數組
  5         let list=["1_icon.jpg","2_icon.jpg","3_icon.jpg","4_icon.jpg","5_icon.jpg","6_icon.jpg"];
  6         init();
  7         function init() {
  8             //獲取小圖片的容器
  9             smallImg=document.querySelector(".small_img");
 10             //在小圖片上移動的方塊
 11             mask=document.querySelector(".mask");
 12             //獲取大圖片的容器
 13             bigImg=document.querySelector(".big_img");
 14             //獲取下方商品列表的容器
 15             iconImgList=document.querySelector(".iconImgList");
 16             //獲取切換商品列表的左右按鈕
 17             leftBn=document.querySelector(".leftBn");
 18             rightBn=document.querySelector(".rightBn");
 19             //遍歷圖片，拿到當前圖片
 20             for(let i=0;i<list.length;i++){
 21                 let img=new Image();
 22                 img.src="./img/"+list[i];
 23                 iconImgList.appendChild(img);
 24                 if(i===0){
 25                     selectImg(img);
 26                 }
 27             }
 28             setImage("./img/"+list[0].replace("_icon",""));
 29             firstP=0;
 30             lastP=4;
 31             //給小圖片添加鼠標事件
 32             smallImg.addEventListener("mousemove",mouseHandler);
 33             smallImg.addEventListener("mouseleave",mouseLeaveHandler);
 34             smallImg.addEventListener("mouseenter",mouseLeaveHandler);
 35             iconImgList.addEventListener("mouseover",imgSelectHandler);
 36             //給左右按鈕添加點擊事件
 37             leftBn.addEventListener("click",clickHandler);
 38             rightBn.addEventListener("click",clickHandler);
 39         }
 40 
 41         function imgSelectHandler(e) {
 42             //判斷當前事件源是不是商品列表中選中的圖片
 43             if(e.target===iconImgList) return;
 44             selectImg(e.target);
 45             setImage(e.target.src.replace("_icon",""));
 46 
 47         }
 48 
 49         function setImage(src) {
 50             //設置當前選中的圖片
 51             if(smallImg.children.length===1){
 52                 let img=new Image();
 53                 img.src=src;
 54                 img.style.width="350px";
 55                 img.style.height="350px";
 56                 img.style.position="absolute";
 57                 smallImg.insertBefore(img,smallImg.firstElementChild);
 58             }else{
 59                 smallImg.firstElementChild.src=src;
 60             }
 61             bigImg.style.backgroundImage=`url(${src})`;
 62         }
 63         function mouseLeaveHandler(e) {
 64             //鼠標進入大圖顯示，離開隱藏
 65             if(e.type==="mouseenter"){
 66                 bigImg.style.display="block";
 67             }else if(e.type==="mouseleave"){
 68                 bigImg.style.display="none";
 69             }
 70         }
 71         function mouseHandler(e) {
 72             //設置當前方塊移動的距離
 73             mask.style.left=e.x-mask.offsetWidth/2+"px";
 74             mask.style.top=e.y-mask.offsetHeight/2+"px";
 75             //實現小方塊移動時的邊界限定
 76             if(mask.offsetLeft<0){
 77                 mask.style.left="0px";
 78             }
 79             if(mask.offsetTop<0){
 80                 mask.style.top="0px";
 81             }
 82             if(mask.offsetLeft+mask.offsetWidth>smallImg.offsetWidth){
 83 
 84                 mask.style.left=smallImg.offsetWidth-mask.offsetWidth+"px";
 85             }
 86             if(mask.offsetTop+mask.offsetHeight>smallImg.offsetHeight){
 87                 mask.style.top=smallImg.offsetHeight-mask.offsetHeight+"px";
 88             }
 89             bigImg.style.backgroundPositionX=-mask.offsetLeft*(800/350)+"px";
 90             bigImg.style.backgroundPositionY=-mask.offsetTop*(800/350)+"px";
 91         }
 92 
 93         function clickHandler(e) {
 94             //點擊左邊按鈕，圖片依次換一張
 95             if(this===leftBn){
 96                 if(firstP-1<0) return;
 97                 firstP--;
 98                 lastP--;
 99                 iconImgList.style.left=-firstP*58+"px";
100             }else if(this===rightBn){
101                 if(lastP+1>list.length-1) return;
102                 lastP++;
103                 firstP++;
104                 iconImgList.style.left=-(lastP-4)*58+"px";
105             }
106         }
107         function selectImg(elem) {
108             if(pre){
109                 pre.style.border="2px solid transparent";
110             }
111             pre=elem;
112             pre.style.border="2px solid #e01222";
113         }
114     </script>

總結：利用對一個事件源綁定多個事件以及事件對象的樣式操作，對圖片的顯示和隱藏來實現放大鏡效果。

如有錯誤，請及時指點！！！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js 實現商品放大鏡效果 js、jquery實現放大鏡效果基於Jquery的商城商品圖片的放大鏡效果(非組件) js放大鏡 JS實現圖片放大鏡圖片放大鏡(像淘寶瀏覽商品一樣)JS操作 WPF放大鏡效果 JS 圖片放大鏡圖片放大鏡效果實現過程詳解 jQuery 局部放大效果(放大鏡)