最近真是太忙了，没时间更的博客都积攒下了，今天一股脑发完，来看看今天最后一篇——放大镜效果的代码和效果吧~
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=)