最近真是太忙了，沒時間更的部落格都積攢下了，今天一股腦發完，來看看今天最後一篇——放大鏡效果的代碼和效果吧~
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/big.css">
<script src="js/big.js"></script>
</head>
<body>
<div class="fa">
<div class="sml">
<div class="ks"></div>
</div>
<div class="big"></div>
</div>
</body>
</html>
CSS
/*父盒子*/
.fa {
position: relative;
width: 1210px;
height: 850px;
}
/* 清掉body外邊距 友善js計算 如果不去掉也可以在js計算時處理一下 */
body {
margin: 0;
}
/*小圖盒子*/
.sml {
width: 400px;
height: 400px;
background: url("../imgs/m.jpg") no-repeat;
border: 1px solid;
/*父相*/
position: relative;
}
/*用來選擇 圖檔放大區域的 可視區域 盒子*/
.ks {
width: 200px;
height: 200px;
background-color: orange;
/*預設隐藏*/
visibility: hidden;
/*透明度*/
opacity: .5;
/*子絕 必須脫标 才能控制定位的top和left讓它跟随滑鼠動起來*/
position: absolute;
}
/*放大區域*/
.big {
width: 400px;
height: 400px;
margin-left: 2px;
background: url("../imgs/b.jpg") no-repeat;
border: 1px solid;
/*子絕*/
position: absolute;
/*定位位置*/
top: 0px;
left: 402px;
/*預設隐藏*/
visibility: hidden;
}
JavaScript
//定義元素對象變量
var sml;
var ks;
var big;
//頁面加載事件
window.onload = function () {
//擷取元素對象
sml = document.querySelector(".sml");
console.log(sml);
ks = document.querySelector(".ks");
console.log(ks);
big = document.querySelector(".big");
console.log(big);
//添加監聽事件 用閉包的方式添加處理程式
sml.addEventListener('mouseover', sml_cx()); //滑鼠進入事件
sml.addEventListener('mouseout', sml_yc()); //滑鼠移出事件
}
//滑鼠移出事件處理程式
function sml_yc() {
return yc;
}
function yc() {
//移出滑鼠隐藏元素
ks.style.visibility = "hidden";
big.style.visibility = "hidden";
}
//滑鼠進入事件處理程式
function sml_cx() {
return cx;
}
function cx() {
//滑鼠進入 顯示元素
ks.style.visibility = "visible";
big.style.visibility = "visible";
// 添加監聽事件 滑鼠移動 閉包
sml.addEventListener("mousemove", sml_mov());
}
//滑鼠移動 處理程式
function sml_mov() {
return mov;
}
function mov(e) {
//事件對象 相容性處理
e = e || window.event;
//擷取滑鼠的位置-元素的寬高一半 指派給ks的定位值 讓滑鼠在ks的中間
ks.style.top = e.pageY - ks.offsetHeight / 2 + "px";
ks.style.left = e.pageX - ks.offsetWidth / 2 + "px";
// ks的寬高是 big的一半 是以big的background-position值 是ks定位值的兩倍 并且要是負數 ks和big是相反方向移動
big.style.backgroundPositionX = -(e.pageX * 2 - ks.offsetWidth) + "px";
big.style.backgroundPositionY = -(e.pageY * 2 - ks.offsetHeight) + "px";
// 判斷ks的移動邊界 不能讓它出了sml的邊界
//可移動距離 判斷條件 sml寬（高）-ks寬（高）/ 2 這裡/2 是因為上面讓滑鼠在ks中心 是以邊界要減一半ks的寬（高）
//如果超出 就讓它永遠等于邊界值
if (e.pageX > sml.offsetWidth - ks.offsetWidth / 2) {
ks.style.left = sml.offsetWidth - ks.offsetWidth + "px";
} else if (e.pageX < ks.offsetWidth / 2) {
ks.style.left = 0 + "px";
}
if (e.pageY > sml.offsetHeight - ks.offsetHeight / 2) {
ks.style.top = sml.offsetHeight - ks.offsetHeight + "px";
} else if (e.pageY < ks.offsetHeight / 2) {
ks.style.top = 0 + "px";
}
}
康康效果~
右側顯示圖檔上的水印是我圖檔的問題，不是代碼問題~~
好了，今日庫存全都發完了，感興趣的各位盆友留個贊吧~
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)