頁面中圖片細節放大展現

時間 2019-11-24

標籤頁面圖片細節放大展現简体版

原文原文鏈接

在不少的電商商品展現網頁中，都會出現放大產品細節的功能，這裏就根據主要原理，簡單用css和js實現這個效果：
實現原理：
一、選擇兩張內容相同，大小不一致的圖片，一個是要待選擇細節的小圖片，另外一張是用來展現細節的大圖片。javascript

二、要出現「選擇小圖片哪一個細節」就展現出「大圖片相同部分的細節內容」，這裏就牽扯到比例的問題，即小圖片中，
鼠標選擇出的細節大小與整個小圖片的長寬比例，要和大圖片展現出的區域與大圖片的長寬比例一致，這樣效果纔會逼真，
以下圖：css

根據比例相等咱們能夠獲得公式：h1/h2 = h3/h4 ; w1/w2 = w3/w4
因爲圖片的長寬在選擇的時候就已經固定好了，要改變的就是小圖片上的那塊懸浮層大小根據比例作出相應的改變。

三、當鼠標在小圖片上移動的時候，根據比例大圖片在顯示區域移動，這樣纔會出現效果。

源碼展現：html

  1 <!doctype html>
  2 <html lang="en">
  3  <head>
  4   <meta charset="UTF-8">
  5   <meta name="Generator" content="EditPlus®">
  6   <meta name="Author" content="">
  7   <meta name="Keywords" content="">
  8   <meta name="Description" content="">
  9   <title>自定義圖片放大器</title>
 10   <style type="text/css">
 11 
 12   *{margin:0;padding:0;}
 13 
 14   #show_bigger_pic{
 15       position:absolute;
 16       width:800px;
 17       height:400px;
 18       top:200px;
 19       left:200px;
 20   }
 21   .small_pic_div{
 22       width:273px;
 23       height:177px;
 24       border:1px solid;
 25       float:left;
 26       position:relative;/*  cover:absolute定位使用*/
 27   }
 28   .big_pic_div{
 29       width:273px;
 30       height:177px;
 31       border:1px solid;
 32       float:left;
 33       margin-left:10px;
 34       display:none;
 35       overflow:hidden;
 36   }
 37   .big_pic_div>img{
 38       position:relative;
 39   }
 40   .cover{
 41       width:273px;
 42       height:177px;
 43       position:absolute;
 44       border:1px solid;
 45       z-index:2;
 46       left:0;
 47       top:0;
 48   }
 49   .float_span{
 50       width:80px;
 51       height:80px;
 52       position:absolute;
 53       z-index:1;
 54       background:#B2DFEE;
 55       opacity:0.5;
 56       display:none;
 57       border:1px solid;
 58       left:0;
 59       top:0;
 60   }
 61   </style>
 62 
 63 
 64   <script type="text/javascript">
 65     function gbc(tparent,tclass){//獲取指定父元素的指定類的子元素的函數
 66       var allclass=tparent.getElementsByTagName('*');
 67       var result=[];
 68       for (var i=0;i<allclass.length;i++)
 69       {
 70           if(allclass[i].className==tclass)
 71           result.push(allclass[i]);
 72       }
 73       return result;//返回的是數組
 74   }
 75 
 76   window.onload =function (){
 77       var sbp=document.getElementById('show_bigger_pic');//獲取最外層div
 78       var  c=gbc(sbp,'cover')[0];//獲取cover層
 79       var  fs=gbc(sbp,'float_span')[0];//獲取浮動層
 80       var spd=gbc(sbp,'small_pic_div')[0];//獲取小圖div
 81       var sp=spd.getElementsByTagName('img')[0];//獲取小圖
 82       var bpd=gbc(sbp,'big_pic_div')[0];//獲取大圖div
 83       var bp=bpd.getElementsByTagName('img')[0];//獲取大圖
 84 
 85       var btn=true;//開關，因參數只需獲取一次
 86 
 87       
 88       c.onmouseover  =function(){//鼠標移入小圖
 89           fs.style.display="block";
 90           bpd.style.display="block";
 91           c.style.cursor="pointer";
 92           
 93           if(btn){
 94               //按照比例要獲得浮動層的大小
 95               //大小圖像的長之比
 96             
 97              
 98 
 99               var cb = sp.offsetHeight/bp.offsetHeight;
100               var fsw = Math.ceil(cb * bpd.offsetHeight);//比例計算
101               fs.style.height = fsw+"px";
102               //alert(fs.offsetHeight+"   "+Math.ceil(cb * bpd.offsetHeight));
103               var kb = sp.offsetWidth/bp.offsetWidth;
104               var fsh = Math.ceil(cb * bpd.offsetWidth);
105               fs.style.width = fsh+"px";
106 
107               btn = false;
108           };
109 
110         
111       };
112 
113       c.onmouseout  =function(){//鼠標移出
114           fs.style.display="none";
115           bpd.style.display="none";
116       };
117 
118 
119       c.onmousemove =function (ev){//鼠標移動
120 
121         
122           //保存高比例
123           var hb = sp.offsetHeight/fs.offsetHeight;
124           //保存寬比例
125           var wb = sp.offsetWidth/fs.offsetWidth;
126 
127           var pos=ev||event;
128           var left=pos.clientX-sbp.offsetLeft-fs.offsetWidth/2;//計算left
129           var top=pos.clientY-sbp.offsetTop-fs.offsetHeight/2;//計算top
130           if(left<0){
131             left=0;//當小於0強制固定
132           }
133           else if(left>spd.offsetWidth-fs.offsetWidth){//大於某一參數也固定，以防浮動層移出圖片區
134               left=c.offsetWidth-fs.offsetWidth;
135           }
136           if(top<0){
137               top=0;
138           }
139           else if(top>spd.offsetHeight-fs.offsetHeight){
140               top=c.offsetHeight-fs.offsetHeight;
141           }
142           fs.style.left=left+"px";//浮動層位置改變
143           fs.style.top=top+'px';
144 
145           bp.style.left=-wb*left+"px";//右邊大圖位置的改變，表如今實際中是放大區改變
146           bp.style.top=-hb*top+"px";
147       };
148   }
149 
150   </script>
151  </head>
152  <body>
153   <div id="show_bigger_pic">
154   <span class="cover"></span>
155   <span class="float_span"></span>
156   <div class="small_pic_div">
157   <img src="img/small.bmp" alt="" />
158   </div>
159   <div class="big_pic_div">
160   <img src="img/big.bmp" alt="" />
161   </div>
162   </div>
163  </body>
164 </html>

查看結果：

java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。