javascript實現放大鏡功能
阿新 • • 發佈：2020-12-11
本文例項為大家分享了javascript實現放大鏡功能的具體程式碼，供大家參考，具體內容如下
描述：當滑鼠在小圖片上移動時，通過捕捉滑鼠在小圖片上的位置,使放大鏡的移動方向與大圖的水平和垂直方向相反
如何設計
- 頁面元素
- 技術要點：事件捕捉和定位
- 難點：計算
涉及技術
- onmouseover：當滑鼠指標移動到指定的物件上時發生
- onmouseout：滑鼠指標移出指定物件時發生
- onmousemove：滑鼠指標移動時發生
- offsetLeft | offsetTop | offsetWidth | offsetHeight
- event.clientX | event.clientY
偏移量與style.left
- style.left返回字串，例如30px，而offsetLeft返回數字30。
- style.left可以讀和寫，offsetLeft是隻讀的。如果我們想改變div的位置，我們可以修改style.left.
- style.left應事先定義，否則值為空。
需要考慮
- 如何使小畫面上的放大鏡與大圖同步移動
- IE相容性問題
程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Magnifier Effect</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
width: 400px;
height: 255px;
margin: 50px;
border: 1px solid #ccc;
display: block;
position: relative;
}
#small-box{
position: relative;
z-index: 1;
}
#float-box{
width: 160px;
height: 120px;
position: absolute;
background-color: #ffffcc;
border:1px solid #ccc;
filter: alpha(opacity = 50);
opacity: .5;
display: none;
}
#mask{
position: absolute;
display: block;
width: 400px;
height: 255px;
z-index: 10;
background-color: #ffffff;
filter: alpha(opacity = 0);
opacity: 0;
cursor: move;
}
#big-box{
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
display: none;
}
#big-box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<script>
// 頁面載入完畢之後執行
window.onload = function(){
// 獲取父元素wrap,小盒子,遮罩層,放大鏡,大盒子,大圖片
var wrap = document.getElementById('wrap');
var smallBox = document.getElementById('small-box');
var mask = document.getElementById('mask');
var floatBox = document.getElementById('float-box');
var bigBox = document.getElementById('big-box');
var bigImg = bigBox.getElementsByTagName('img')[0];
console.log(wrap,smallBox,mask,floatBox,bigBox,bigImg);
// 滑鼠移動到小盒子上時,放大鏡顯示,大盒子顯示
mask.onmouseover = function(){
floatBox.style.display = 'block';
bigBox.style.display = 'block';
}
// 滑鼠移出小盒子時,放大鏡隱藏,大盒子隱藏
mask.onmouseout = function(){
floatBox.style.display = 'none';
bigBox.style.display = 'none';
}
// 新增滑鼠移動事件
mask.onmousemove = function(ev){
// 獲取當前滑鼠移動的位置並考慮IE相容性
var _event = ev || window.event;
// 獲取放大鏡向左移動的距離
var left = _event.clientX - wrap.offsetLeft - smallBox.offsetLeft - floatBox.offsetWidth / 2;
var top = _event.clientY - wrap.offsetTop - smallBox.offsetTop - floatBox.offsetHeight / 2;
// console.log(left,top);
// 考慮邊界情況
if(left < 0){
left = 0;
}else if(left > (mask.offsetWidth - floatBox.offsetWidth)){
left = mask.offsetWidth - floatBox.offsetWidth;
}
if(top < 0){
top = 0;
}else if(top > (mask.offsetHeight - floatBox.offsetHeight)){
top = mask.offsetHeight - floatBox.offsetHeight;
}
floatBox.style.left = left + 'px';
floatBox.style.top = top + 'px';
// calculate percentage
var percentX = left / (mask.offsetWidth - floatBox.offsetWidth);
var percentY = top / (mask.offsetHeight - floatBox.offsetHeight);
// calculate displacement of big image,big image has opposite direction of magnifying glass
bigImg.style.left = -percentX * (bigImg.offsetWidth - bigBox.offsetWidth) + 'px';
bigImg.style.top = -percentY * (bigImg.offsetHeight - bigBox.offsetHeight) + 'px';
}
}
</script>
<body>
<div id="wrap">
<div id="small-box">
<div id="mask"></div>
<div id="float-box"></div>
<img src="./img/macbook-small.jpg" alt="smallMac">
</div>
<div id="big-box">
<img src="./img/macbook-big.jpg" alt="bigMac">
</div>
</div>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。