使用js實現詳情頁放大鏡效果？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1.html
<div id="small">
<div id="mo">
</div>
<img src="img/timg.jpg"/>
<div id = "frame">
</div>
</div>
<div id = "big">
<img src="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;
/* 在鼠標移入原始框的時候才顯現,所以初始值為隱藏 */
display: none;
/* 在放大鏡中插入背景圖,根據背景圖定位,改變放大鏡中和原始框中的圖片一一對應 */
/* 0 0 即為background-position的值 */
background: url(img/timg.jpg) no-repeat 0 0;
/* CSS2中的內容要和CSS3中的分開 */
background-size: 400px 400px ;
}
#big{
width:400px;
height:400px;
position:relative;
box-shadow: 0 0 5px #000;
/* 因為放大框中的內容
與放大鏡是16：1放大的,
所以原始框與放大框相同大小的情況下
使用overflow: hidden;用放大框截取插入圖片的大小 */
overflow: hidden;
/* 在鼠標移入原始框的時候才顯現,所以初始值為隱藏 */
display: none;
}
#big img{
width:1600px;
height:1600px;
position: absolute;
left: 0;
top:0;
}
#big,#small{
margin-left: 100px;
float: left;
}
#mo{
/* 最上邊的一層膜寬高100%,層級在最上層,完全覆蓋住原始框，
確保鼠標在原始框上移動時,放大鏡能跟著穩定的移動，
即鼠標移動的參照物唯一 */
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];
//鼠標移入事件(注：沒有兼容問題)
//放大鏡和放大框顯現出來
oSmall.onmouseenter = function(){
oBig.style.display = "block";
oFrame.style.display = "block";
//鼠標移入圖片變模糊
oSmall_img.style.opacity = "0.3";
}
//鼠標移出事件(注：沒有兼容問題)
//放大鏡和放大框變回原始的隱藏狀態
oSmall.onmouseleave = function(){
oBig.style.display = "none";
oFrame.style.display = "none";
//鼠標移出,圖片變清晰
oSmall_img.style.opacity = "1"
}
//鼠標移動事件(注：有兼容問題)
oSmall.onmousemove = function(event){
//解決兼容問題
var e = event || window.event;
//獲取鼠標在放大鏡中心的位置坐標(用于判斷放大鏡不會移出原始框)
//獲取位置用offsetX/offsetY
//size初始值為100,與放大鏡未放大之前一致,
//size/2是為了獲取鼠標在放大鏡的中心點
//用size而不是定值,是為了后邊放大鏡隨鼠標滾輪滾動放大縮小時
//鼠標能一直在放大鏡中心位置
//e.offsetY/e.offsetX是鼠標到原始框邊框的距離
//size / 2是鼠標到放大鏡邊框的距離
//nTop/nLeft是放大鏡邊框到原始框邊框的距離
var nTop = e.offsetY - size / 2;
var nLeft = e.offsetX - size / 2;
//判斷放大鏡的臨界值
//不小于最小值,不大于最大值
//判斷放大鏡的最小值
if(nTop <= 0){
//差一點就等于零的時候,也賦值為零
nTop = 0;
}
if(nLeft <= 0){
nLeft = 0;
}
//判斷放大鏡的最大值
//因為坐標只有offsetLeft 和 offsetTop兩個,所以計算最大值時:
//需要獲取放大鏡的左和上的邊框到原始框的左和上的邊框的最大距離與原始框的坐標位置進行比較
//offsetHeight/offsetWidth獲取元素的寬高
//原始框的寬高 - 放大框的寬高 == 放大鏡可以移動的最大值
var maxTop = oSmall.offsetHeight - oFrame.offsetHeight;
var maxLeft = oSmall.offsetWidth - oFrame.offsetWidth;
//放大鏡的邊框大于等于最大值,停
if(nTop >= maxTop){
nTop = maxTop;
}
if(nLeft >= maxLeft){
nLeft = maxLeft;
}
//放大鏡的位置坐標
oFrame.style.top = nTop + "px"
oFrame.style.left = nLeft + "px"
//計算放大鏡和放大框之間的縮放比例
//計算比例用offsetWidth/offsetHeight
var propX = oBig.offsetWidth/oFrame.offsetWidth;
var propY = oBig.offsetHeight/oFrame.offsetHeight;
//-nTop/-nLeft用負值,使放大框中的內容與放大鏡所停的位置一致(圖片內容移動方向相同)
//如果是正值,放大鏡移動時與放大框中的內容相反移動(放大框中不會出現對應的放大圖片)
oBig_img.style.top = -nTop*propY + "px"
oBig_img.style.left = -nLeft*propX + "px"
//鼠標移入時,放大鏡清晰,原始框模糊
//利用改變插入到放大鏡中的背景圖的position,進行圖片的一一對應
//注意:``里的${}和${}中間用空格隔開
oFrame.style.backgroundPosition = `${-nLeft}px ${-nTop}px`;
}
//鼠標滾輪事件
//注意:兼容問題
//設置size初始值為100,即放大鏡未放大縮小時的原始狀態
//通過判斷滾輪的上下滾動方向,改變放大鏡的大小,即寬高同時增大或縮小
var size = 100;
//解決兼容問題
//FF（火狐)
if(document.addEventListener){
//第一個參數是事件名稱,
//第二個參數是事件處理函數,
//第三個參數是一個被廢棄的參數,是以事件捕獲的形式,還是事件冒泡的形式觸發事件,默認false
//第三個參數基本用不到
document.addEventListener('DOMMouseScroll',handleEvent,false);
}
//IE/Opera（歐鵬）/Chrome(谷歌)
window.onmousewheel = document.onmousewheel = handleEvent;
// 分辨滾輪向上還是向下;
function handleEvent(event){
var e = event || window.event;
// FF => detail 向上 是 負數 ;
// 向下 是 正數;
// Chrome => deltaY 向上 是 負數;
// 向下 是 正數;
var flag = true
if(e.detail != 0 ){
// 說明瀏覽器是火狐;
if(e.detail > 0){
flag = false// 向下;
}else{
flag = true;// 向上;
}
}else{
//說明瀏覽器是IE/Opera/Chrome
if(e.deltaY > 0){
flag = false// 向下;
}else{
flag = true;// 向上;
}
}
//滾輪向上時,放大鏡變大，放大框中的內容縮小;
//滾輪向下時,放大鏡縮小,放大框中的內容變大;
if(flag){
// 向上
size ++;
}else{
size --;// 向下
}
//將size值賦給放大鏡
oFrame.style.width = size + "px";
oFrame.style.height = size + "px";
//當鼠標放在原始框上一動不動時,放大鏡也不會再增大了
oSmall.onmousemove(e);
//放大縮小后放大鏡和放大框的比例發生了變化,導致放大框中的內容與放大鏡所在位置不符
// 根據放大鏡的縮放,重新計算放大框與放大鏡之間的縮放比例
var prop = 400 / size;
// 根據比例縮放放大框中的圖片 ;
oBig_img.style.width = 400 * prop + "px";
oBig_img.style.height = 400 * prop + "px";
}
</script>看完上述內容，你們掌握使用js實現詳情頁放大鏡效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
