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

1.html

<div id='small'> <div id='mo'> </div> <img src='http://www.gepszalag.com/bcjs/img/timg.jpg'/> <div id = 'frame'> </div> </div> <div id = 'big'> <img src='http://www.gepszalag.com/bcjs/img/timg.jpg'/></div>

2.css

<style> *{margin:0;padding:0; } #small{width:400px;height:400px;position:relative;box-shadow: 0 0 5px #000; } #small img{/* 圖片百分百,完全覆蓋原始框 */width:100%;height:100%; } #frame{width:100px;height:100px;position:absolute;box-shadow:0 0 5px #000;top:0;left:0;/* 在鼠標(biāo)移入原始框的時(shí)候才顯現(xiàn),所以初始值為隱藏 */display: none;/* 在放大鏡中插入背景圖,根據(jù)背景圖定位,改變放大鏡中和原始框中的圖片一一對(duì)應(yīng) *//* 0 0 即為background-position的值 */background: url(img/timg.jpg) no-repeat 0 0;/* CSS2中的內(nèi)容要和CSS3中的分開(kāi) */background-size: 400px 400px ; } #big{width:400px;height:400px;position:relative;box-shadow: 0 0 5px #000;/* 因?yàn)榉糯罂蛑械膬?nèi)容與放大鏡是16：1放大的,所以原始框與放大框相同大小的情況下使用overflow: hidden;用放大框截取插入圖片的大小 */overflow: hidden;/* 在鼠標(biāo)移入原始框的時(shí)候才顯現(xiàn),所以初始值為隱藏 */display: none; } #big img{width:1600px;height:1600px;position: absolute;left: 0;top:0; } #big,#small{margin-left: 100px;float: left; } #mo{/* 最上邊的一層膜寬高100%,層級(jí)在最上層,完全覆蓋住原始框，確保鼠標(biāo)在原始框上移動(dòng)時(shí),放大鏡能跟著穩(wěn)定的移動(dòng)，即鼠標(biāo)移動(dòng)的參照物唯一 */width:100%;height:100%;z-index: 999;position: absolute; }</style>

3.js

<script> //獲取原始框 var oSmall = document.getElementById('small'); //獲取放大框 var oBig = document.getElementById('big'); //獲取放大鏡 var oFrame = document.getElementById('frame'); //獲取放大框中的圖片 var oBig_img = oBig.children[0] //獲取原始框中的圖片 var oSmall_img = oSmall.children[1]; //鼠標(biāo)移入事件(注：沒(méi)有兼容問(wèn)題) //放大鏡和放大框顯現(xiàn)出來(lái) oSmall.onmouseenter = function(){ oBig.style.display = 'block'; oFrame.style.display = 'block'; //鼠標(biāo)移入圖片變模糊 oSmall_img.style.opacity = '0.3'; } //鼠標(biāo)移出事件(注：沒(méi)有兼容問(wèn)題) //放大鏡和放大框變回原始的隱藏狀態(tài) oSmall.onmouseleave = function(){ oBig.style.display = 'none'; oFrame.style.display = 'none'; //鼠標(biāo)移出,圖片變清晰 oSmall_img.style.opacity = '1' } //鼠標(biāo)移動(dòng)事件(注：有兼容問(wèn)題) oSmall.onmousemove = function(event){ //解決兼容問(wèn)題 var e = event || window.event; //獲取鼠標(biāo)在放大鏡中心的位置坐標(biāo)(用于判斷放大鏡不會(huì)移出原始框) //獲取位置用offsetX/offsetY //size初始值為100,與放大鏡未放大之前一致, //size/2是為了獲取鼠標(biāo)在放大鏡的中心點(diǎn) //用size而不是定值,是為了后邊放大鏡隨鼠標(biāo)滾輪滾動(dòng)放大縮小時(shí) //鼠標(biāo)能一直在放大鏡中心位置 //e.offsetY/e.offsetX是鼠標(biāo)到原始框邊框的距離 //size / 2是鼠標(biāo)到放大鏡邊框的距離 //nTop/nLeft是放大鏡邊框到原始框邊框的距離 var nTop = e.offsetY - size / 2; var nLeft = e.offsetX - size / 2; //判斷放大鏡的臨界值 //不小于最小值,不大于最大值 //判斷放大鏡的最小值 if(nTop <= 0){ //差一點(diǎn)就等于零的時(shí)候,也賦值為零 nTop = 0; } if(nLeft <= 0){ nLeft = 0; } //判斷放大鏡的最大值 //因?yàn)樽鴺?biāo)只有offsetLeft 和 offsetTop兩個(gè),所以計(jì)算最大值時(shí): //需要獲取放大鏡的左和上的邊框到原始框的左和上的邊框的最大距離與原始框的坐標(biāo)位置進(jìn)行比較 //offsetHeight/offsetWidth獲取元素的寬高 //原始框的寬高 - 放大框的寬高 == 放大鏡可以移動(dòng)的最大值 var maxTop = oSmall.offsetHeight - oFrame.offsetHeight; var maxLeft = oSmall.offsetWidth - oFrame.offsetWidth; //放大鏡的邊框大于等于最大值,停 if(nTop >= maxTop){ nTop = maxTop; } if(nLeft >= maxLeft){ nLeft = maxLeft; } //放大鏡的位置坐標(biāo) oFrame.style.top = nTop + 'px' oFrame.style.left = nLeft + 'px' //計(jì)算放大鏡和放大框之間的縮放比例 //計(jì)算比例用offsetWidth/offsetHeight var propX = oBig.offsetWidth/oFrame.offsetWidth; var propY = oBig.offsetHeight/oFrame.offsetHeight; //-nTop/-nLeft用負(fù)值,使放大框中的內(nèi)容與放大鏡所停的位置一致(圖片內(nèi)容移動(dòng)方向相同) //如果是正值,放大鏡移動(dòng)時(shí)與放大框中的內(nèi)容相反移動(dòng)(放大框中不會(huì)出現(xiàn)對(duì)應(yīng)的放大圖片) oBig_img.style.top = -nTop*propY + 'px' oBig_img.style.left = -nLeft*propX + 'px' //鼠標(biāo)移入時(shí),放大鏡清晰,原始框模糊 //利用改變插入到放大鏡中的背景圖的position,進(jìn)行圖片的一一對(duì)應(yīng) //注意:``里的${}和${}中間用空格隔開(kāi) oFrame.style.backgroundPosition = `${-nLeft}px ${-nTop}px`; } //鼠標(biāo)滾輪事件 //注意:兼容問(wèn)題 //設(shè)置size初始值為100,即放大鏡未放大縮小時(shí)的原始狀態(tài) //通過(guò)判斷滾輪的上下滾動(dòng)方向,改變放大鏡的大小,即寬高同時(shí)增大或縮小 var size = 100; //解決兼容問(wèn)題 //FF（火狐) if(document.addEventListener){ //第一個(gè)參數(shù)是事件名稱, //第二個(gè)參數(shù)是事件處理函數(shù), //第三個(gè)參數(shù)是一個(gè)被廢棄的參數(shù),是以事件捕獲的形式,還是事件冒泡的形式觸發(fā)事件,默認(rèn)false //第三個(gè)參數(shù)基本用不到document.addEventListener(’DOMMouseScroll’,handleEvent,false); } //IE/Opera（歐鵬）/Chrome(谷歌) window.onmousewheel = document.onmousewheel = handleEvent; // 分辨滾輪向上還是向下; function handleEvent(event){var e = event || window.event;// FF => detail 向上 是 負(fù)數(shù) ;// 向下 是 正數(shù);// Chrome => deltaY 向上 是 負(fù)數(shù);// 向下 是 正數(shù);var flag = trueif(e.detail != 0 ){ // 說(shuō)明瀏覽器是火狐; if(e.detail > 0){flag = false// 向下; }else{flag = true;// 向上; }}else{ //說(shuō)明瀏覽器是IE/Opera/Chrome if(e.deltaY > 0){flag = false// 向下; }else{flag = true;// 向上; }}//滾輪向上時(shí),放大鏡變大，放大框中的內(nèi)容縮小;//滾輪向下時(shí),放大鏡縮小,放大框中的內(nèi)容變大;if(flag){ // 向上 size ++;}else{ size --;// 向下}//將size值賦給放大鏡oFrame.style.width = size + 'px';oFrame.style.height = size + 'px';//當(dāng)鼠標(biāo)放在原始框上一動(dòng)不動(dòng)時(shí),放大鏡也不會(huì)再增大了oSmall.onmousemove(e);//放大縮小后放大鏡和放大框的比例發(fā)生了變化,導(dǎo)致放大框中的內(nèi)容與放大鏡所在位置不符// 根據(jù)放大鏡的縮放,重新計(jì)算放大框與放大鏡之間的縮放比例var prop = 400 / size;// 根據(jù)比例縮放放大框中的圖片 ;oBig_img.style.width = 400 * prop + 'px';oBig_img.style.height = 400 * prop + 'px'; }</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。