標籤：nts pac offset element click span aci elements ntb
放大鏡特效
放大鏡在商城網站經常會看到，作為前端，寫這麼一個肯定是小case，本人就獻醜了。如果沒有一點思路的同學，可以先學DOM事件裡的事件位置、距離、寬高各種方法屬性。
那麼直接上代碼，代碼裡各種注釋相當完備：
栗子代碼連結
<!doctype html><title>放大鏡</title><meta charset="utf-8"><style> *{ margin:0; padding:0; list-style:none; } /*處理小圖的樣式*/ #small{ width:400px; height:400px; border:1px solid red; position:absolute; left:50px; top:50px; } #small img{ width: 100%; height: 100%; } #move{ border:1px solid yellow; background:yellow; position:absolute; left:0px; top:0px; opacity:0.3; display:none; } /*圖層蒙版*/ .mask{ width:100%; height:100%; position: absolute; top:0; left:0; } /*處理大圖*/ #big{ width:400px; height:400px; border:1px solid red; position:absolute; left:460px; top:50px; display:none; /*超出隱藏*/ overflow:hidden; } #big img{ width:1000px; height:1000px; position:absolute; } /*處理點擊更換的樣式*/ #dian{ width:400px; height:100px; border:1px solid green; position:absolute; left:50px; top:460px; } #dian li{ float:left; padding:1px; } #dian li img{ width:98px; }</style><!--1.先做小圖--><div id="small"> <img id="smallImg" src="image/1.jpg" > <div id="move"></div> <!-- 圖層蒙版 --> <div class="mask"></div></div><!--2處理大圖 移入small 大圖顯示--><div id="big"> <img id="bigImg" src="image/1.jpg" ></div><!--3更換圖片--><ul id="dian"> <li><img src="image/1.jpg"></li> <li><img src="image/2.jpg"></li> <li><img src="image/3.jpg"></li> <li><img src="image/4.jpg"></li></ul><script> var big=document.getElementById(‘big‘); var bigImg=document.getElementById(‘bigImg‘); var small=document.getElementById(‘small‘); var smallImg=document.getElementById(‘smallImg‘); var move=document.getElementById(‘move‘); var dian=document.getElementById(‘dian‘); var imgs=dian.getElementsByTagName(‘img‘); //小滑塊的寬高：// big.offsetWidth/move=bigImg.offsetWidth/smallImg.offsetWidth// move=big/(bigImg.offsetWidth/smallImg.offsetWidth)// console.log(big.offsetWidth/(bigImg.offsetWidth/smallImg.offsetWidth)); //滑鼠移入small顯示move和big，且設定move的大小 small.onmouseover = function(){ big.style.display=‘block‘; move.style.display=‘block‘; move.style.width = big.offsetWidth/(bigImg.offsetWidth/smallImg.offsetWidth)+ ‘px‘; move.style.height = big.offsetHeight/(bigImg.offsetHeight/smallImg.offsetHeight) + ‘px‘; }; //滑鼠移出隱藏move和big small.onmouseout = function(){ big.style.display = ‘none‘; move.style.display = ‘none‘; }; small.onmousemove=function(e){
var e=e||window.event; //1.擷取滑鼠在small的位置 且 讓小滑塊置中 // 第一種方法： // console.log(e.clientX);//e.pageX // var x=e.clientX-small.offsetLeft - (move.offsetWidth/2); // var y=e.clientY-small.offsetTop - (move.offsetHeight/2); // // 第二種方法：添加圖層蒙版 因為e.offsetX擷取是根據在觸發元素中的所在座標 var x = e.offsetX - move.offsetWidth/2; var y = e.offsetY - move.offsetHeight/2; // console.log(y); //2移動前判斷是否超出零界點 if(x<=0){ x = 0; } if(x>=(small.offsetWidth-move.offsetWidth)){ x = small.offsetWidth-move.offsetWidth; } if(y<=0){ y = 0; } if(y>=(small.offsetHeight-move.offsetHeight)){ y = small.offsetHeight-move.offsetHeight; } //3.讓小滑塊跟著滑鼠移動 move.style.left= x + ‘px‘; move.style.top= y + ‘px‘;//parseInt 10 //4. 讓大圖跟著small裡滑塊移動的距離 1000 400 2.5 var left = - (bigImg.offsetWidth/smallImg.offsetWidth) * x; var top = - (bigImg.offsetHeight/smallImg.offsetHeight) * y; //5.把移動值賦給大圖從而定位 bigImg.style.left=left + ‘px‘; bigImg.style.top=top + ‘px‘; } //點解dian中的某一圖片，把該圖片src賦給smallImg和bigImg for(var i=0;i<imgs.length;i++){ imgs[i].onclick=function(e){ var e=e||window.event; console.log(this.src); smallImg.src=this.src; bigImg.src=this.src; } } </script>
JS 放大鏡特效
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
