學習內容：
1、 event.pageX 屬性回傳滑鼠指標的位置，相對于檔案的左邊緣，
2、clientX 事件屬性回傳當事件被觸發時滑鼠指標相對于瀏覽器頁面（或客戶區）的水平坐標，
3、onmouseenter滑鼠移入
4、 onmouseleave滑鼠移出
案例完整代碼，html+css3+javascript
案例需求:滑鼠點擊左邊圖片時（滑鼠呈十字架），遮罩層顯示，右邊盒子顯示，且滑鼠移動中心在遮罩層中心，右邊大盒子顯示滑鼠點到的地方，以800：350比例顯示，遮罩層只能規定左邊盒子范圍內移動而且不給超出，
/** 步驟： 1. 查找元素 1.1 查找 main 總磁區 1.2 查找 small 盒子 1.3 查找 small 盒子內的 img 小圖片 1.4 查找 mask 遮罩層 1.5 查找 big 盒子 1.6 查找 big 盒子內的 img 大圖片 2. 滑鼠移入 main 的時候 2.1 顯示 遮罩盒子 2.2 顯示 大圖磁區 3. 滑鼠移出 main 的時候 3.1 隱藏 遮罩盒子 3.2 隱藏 大圖磁區 4. 滑鼠在 main 移動的時候 !!! 4.1 遮罩盒子 跟隨 滑鼠移動 4.2 遮罩盒子 在 滑鼠中心 處理 4.3 遮罩盒子 在 磁區邊界 內移動處理 4.4 大圖片 <反向> <按比例> 跟隨 滑鼠移動 注意. 獲取元素偏移值和寬高 1. 獲取 磁區 的 水平，垂直偏移值 2. 獲取 磁區 的 寬度，高度 3. 獲取 遮罩盒子 的 寬度，高度 (隱藏的盒子無法獲取寬高) 4. 獲取 大圖片 的 寬度，高度 (隱藏的盒子無法獲取寬高) */
html代碼:
<body>
<!-- 整個大盒子 -->
<div class="main" id="main">
<div class="small">
<!--小圖-->
<img alt="" class="smallImg" src="../img/iphoneX.jpg" width="350" />
<!-- 遮擋層,黃色的小方塊 -->
<div class="mask"></div>
</div>
<!--大層-->
<div class="big">
<!--大圖-->
<img alt="" class="bigImg" src="../img/iphoneX.jpg" width="800" />
</div>
</div>
</body>
css代碼:
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
/* 把滑鼠指標換成移動圖示 */
cursor: move;
display: none;
}
.small {
position: relative;
height: 350px;
width: 350px;
}
.active .mask,
.active .big {
display: block;
}
.big img {
/* 相對定位：相對自己原本的位置定位，原來的位置保留的 */
position: absolute;
}
</style>javascript代碼:
<script>
//查找元素
var main = document.querySelector(".main");
var small = document.querySelector(".small"); //左邊小盒子
var smallImg = document.querySelector(".smallImg");
var mask = document.querySelector(".mask"); //黃色遮罩層
var big = document.querySelector(".big");//右邊小盒子
var bigImg = document.querySelector(".big .bigImg");
//2. 滑鼠移入 main 的時候
//2.1 顯示 遮罩盒子
// 2.2 顯示 大圖磁區
main.onmouseenter=function () {
mask.style.display="block";
big.style.display="block";
};
main.onmouseleave=function () {
mask.style.display="none";
big.style.display="none";
};
// 4. 滑鼠在 main 移動的時候 !!!
// 4.1 遮罩盒子 跟隨 滑鼠移動
// 4.2 遮罩盒子 在 滑鼠中心 處理
// 4.3 遮罩盒子 在 磁區邊界 內移動處理
// 4.4 大圖片 <反向> <按比例> 跟隨 滑鼠移動
small.onmousemove=function (e) {
var x=e.pageX-100-(175/2); //盒子的寬高為300px，因為滑鼠默認在左上角，因為需要向左移動自身一半
var y=e.pageY-100-(175/2); 盒子的寬高為300px，因為滑鼠默認在左上角，因為需要向下移動自身一半
if(x<0) x=0; //規定遮罩層移動范圍，如果遮罩層超出了小盒子邊框，x就重置為0.
if(y<0) y=0; // //規定遮罩層移動范圍，如果遮罩層超出了小盒子邊框，y就重置為0.
if(x>175) x=175; //遮罩層本身的寬高為175
if(y>175) y=175;
mask.style.top=(y)+"px";
mask.style.left=(x)+"px";
bigImg.style.top=(-y*(800/350))+"px"; //右邊放大效果，以800：350顯示
bigImg.style.left=(-x*(800/350))+"px"; //在xy前面加-號是因為需要反向顯示
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226248.html
標籤：其他
上一篇：Vue實作購物小球拋物線