原生JS怎么實現(xiàn)放大鏡效果

這篇文章給大家分享的是有關(guān)原生JS怎么實現(xiàn)放大鏡效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

10多年的商城網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整商城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“商城網(wǎng)站設(shè)計”,“商城網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

具體內(nèi)容如下

<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 img{
 vertical-align: top;
 }
 .fdj {
 width: 350px;
 height: 350px;
 position: relative;
 margin: 100px auto;
 border: 1px solid gainsboro;
 }
 .small {
 position: relative;
 }
 .small img {
 width: 350px;
 }
 .mask {
 width: 100px;
 height: 100px;
 background: rgba(255, 255, 0, 0.4);
 position: absolute;
 left: 0;
 top: 0;
 cursor: move;
 display: none;
 }
 .big {
 position: absolute;
 top: 0;
 left: 360px;
 width: 500px;
 height: 500px;
 border: 1px solid gainsboro;
 overflow: hidden;
 display: none;
 }
 .big img{
 position: absolute;
 left: 0;
 top: 0;
 }
 </style>
 </head>

 <body>
 <div class="fdj">
 <div class="small">
 <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
 <div class="mask"></div>
 </div>
 <div class="big">
 <img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
 </div>
 </div>
 </body>
 <script type="text/javascript">
 var fdj = document.querySelector('.fdj') // 獲得最大的盒子
 var small = document.querySelector('.small'); //獲取小圖片盒子
 var big = document.querySelector('.big'); //獲取大圖片盒子
 var bigs = big.children[0] //大圖片 
 var smalls = small.children[0] //小圖片
 var mask = small.children[1]; //遮罩

 //鼠標(biāo)移入小圖片盒子
 small.onmouseover = function() {
 //鼠標(biāo)移入圖片盒子將遮罩與大圖片顯示
 mask.style.display = 'block';
 big.style.display = ' block';
 };

 //鼠標(biāo)移出小圖片盒子
 small.onmouseout = function() {
 //鼠標(biāo)移出小圖片盒子將遮罩與大圖片隱藏
 mask.style.display = 'none';
 big.style.display = 'none';
 };

 var x=0;
 var y=0;
 //鼠標(biāo)在小圖片上移動時
 small.onmousemove = function(ev) {
 var ev = event || window.event;
 //讓鼠標(biāo)在遮罩正中
 //鼠標(biāo)X坐標(biāo)與Y坐標(biāo)
 x = ev.clientX -this.offsetParent.offsetLeft- mask.offsetWidth / 2 ; 
 y = ev.clientY -this.offsetParent.offsetTop- mask.offsetHeight / 2 ;
 //將遮罩限制在小圖片盒子中

 if (x<0) {
 x=0;
 }else if(x>small.offsetWidth-mask.offsetWidth){
 x = small.offsetWidth-mask.offsetWidth;
 }

 if(y<0){
 y=0;
 }else if(y>small.offsetHeight-mask.offsetHeight){
 y= small.offsetHeight-mask.offsetHeight
 }
 mask.style.left = x + 'px';
 mask.style.top = y + 'px';

 //大圖與小圖的比例

 /*var scalX = bigs.offsetWidth/small.offsetWidth;
 var scalY = bigs.offsetHeight/small.offsetHeight;*/

 var scalX = x/(small.offsetWidth-mask.offsetWidth);
 var scalY = y/(small.offsetHeight-mask.offsetHeight);

 bigs.style.left = -(x*scalX)+'px';
 bigs.style.top = -(y*scalY)+'px';

 };

 </script>

</html>

效果圖：（演示）

原生JS怎么實現(xiàn)放大鏡效果

感謝各位的閱讀！關(guān)于“原生JS怎么實現(xiàn)放大鏡效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享題目：原生JS怎么實現(xiàn)放大鏡效果
網(wǎng)頁地址：http://muchs.cn/article16/pgdegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站設(shè)計、營銷型網(wǎng)站建設(shè)、域名注冊、動態(tài)網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)