原理：兩張圖片，大div包含兩個圖片的div，大圖片隱藏 找到物件 var box = document.getElementById("box");//大的盒子模組 var smallBox = document.getElementById("smallBox");//小圖片 var mask = document.getElementById("mask");//黃色高亮區域 var bigBox = document.getElementById("bigBox");//大圖片 var bigImg = bigBox.children[0];//圖片 //思路： //1. 給smallbox註冊滑鼠經過事件， 讓mask顯示， 讓bigBox顯示 //2. 給smallbox註冊滑鼠離開事件， 讓mask隱藏，讓bigbox隱藏 //3. 給smallbox註冊滑鼠移動事件 //3.1 讓mask跟著滑鼠移動 //3.2 讓大圖片等比例跟著移動 //1.經過smallbox小圖片其他兩個顯示，離開隱藏 smallbox.onmouseover = function（）{ mask.style.display = "block"; block.style.dispaly = "block"; }; smallbox.onmouseout = function（）{ mask.style.display = "none"; block.style.dispaly = "none"; } //smallbox滑鼠移動事件 smallbox.onmousemove = function(){ mask.style.left = x+"px";//小圖片移動多少 maskstyle.top = y+"px"; } x為多少呢？ mask.style.left以父元素box距離的left值 pagex事件元素的離文件的距離 所以mask.style.left = pagex-box.offsetLeft（box到文件左邊界的距離）
//smallbox滑鼠移動事件 smallbox.onmousemove = function(){ var x = pageX-box.offsetLeft; var y = pageY-box.offsetTop; mask.style.left = x+"px";//小圖片移動多少 maskstyle.top = y+"px"; } 執行程式碼發現，滑鼠在mask的左上角再減去mask自身圖片的一半，將滑鼠放在mask中間，參考上篇盒子移動 //smallbox滑鼠移動事件 smallbox.onmousemove = function(){ var x = pageX-box.offsetLeft; var y = pageY-box.offsetTop; x = x-mask.offsetWidth/2; y = y-mask.offsetHeight/2; mask.style.left = x+"px";//小圖片移動多少 maskstyle.top = y+"px"; }
上部，四周都會超出，給四周設定界限，不能超過 if(x<0){ x=0; } if(x>smallBox.offsetWidth - mask.offsetWidth){ x=smallBox.offsetWidth - mask.offsetWidth; } y同理；
程式碼如下： //smallbox滑鼠移動事件 smallbox.onmousemove = function(){ var x = pageX-box.offsetLeft; var y = pageY-box.offsetTop; if (x < 0) { x = 0; } if (x > smallBox.offsetWidth - mask.offsetWidth) { x = smallBox.offsetWidth - mask.offsetWidth; } if (y < 0) { y = 0; } if (y > smallBox.offsetHeight - mask.offsetHeight) { y = smallBox.offsetHeight - mask.offsetHeight } x = x-mask.offsetWidth/2; y = y-mask.offsetHeight/2; mask.style.left = x+"px";//小圖片移動多少 maskstyle.top = y+"px"; //移動大圖片 大圖片移動的距離/mask移動的距離 = 大圖片的寬度/smallBox的寬度(原理) bigImg.style.left = -bigImg.offsetWidth/smallBox.offsetWidth * x + "px"; bigImg.style.top = -bigImg.offsetHeight/smallBox.offsetHeight * y + "px"; } 右邊的隱藏的大圖跟隨mask移動，所以在mask移動事件中移動，直接加上了，因為是反的，所以是負值