JS——放大镜
2024-09-07 17:34:48
放大镜:
1、比例系数要恒定:在系数为4的情况下,若原图是820*512,那么小图必须是205*128,放大镜若是50,原图显示区域必须200
2、计算鼠标在小图中的坐标
3、放大镜需要在鼠标中间位置,也就是鼠标在盒子中的坐标减去其宽度高度的一半
4、放大镜移动范围:marginLeft、marginTop的值必须是0到小图宽度、高度减去放大镜宽度、高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 400px;
margin: 150px auto;
position: relative;
} .small {
position: relative;
width: 205px;
height: 128px;
border: 1px solid #CCA55B;
} .magnifier {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #ccc;
opacity: 0.3;
display: none;
cursor: move;
} .big {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
top: 0;
left: 215px;
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="small">
<img src="data:images/nba.jpg" width="205">
<div class="magnifier"></div>
</div>
<div class="big">
<img src="data:images/nba.jpg" style="float: left">
</div>
</div>
<script>
var box = document.getElementsByTagName("div")[0];
var samll = box.children[0];
var magnifier = samll.children[1];
var big = box.children[1];
var img = big.children[0];
//1、进入盒子显示,离开隐藏
samll.onmouseenter = function () {
magnifier.style.display = "block";
big.style.display = "block";
} samll.onmouseleave = function () {
magnifier.style.display = "none";
big.style.display = "none";
} //2、鼠标进入盒子
samll.onmousemove = function (ev) {
var pageX = ev.pageX || scroll().left + ev.clientX;
var pageY = ev.pageY || scroll().top + ev.clientY;
//small.offsetLeft=0,因为他的相对的是box的距离就是0px,所以取box.offsetLeft的值
var x = pageX - box.offsetLeft - magnifier.offsetWidth / 2;//让鼠标在放大镜中间
var y = pageY - box.offsetTop - magnifier.offsetHeight / 2;//让鼠标在放大镜中间 if (x < 0) {
x = 0;
}
//samll.offsetWidth包括了2px的边框
if (x >= samll.offsetWidth - 2 - magnifier.offsetWidth) {
x = samll.offsetWidth - 2 - magnifier.offsetWidth;
}
if (y < 0) {
y = 0;
}
if (y >= samll.offsetHeight - 2 - magnifier.offsetHeight) {
y = samll.offsetHeight - 2 - magnifier.offsetHeight;
}
magnifier.style.left = x + "px";
magnifier.style.top = y + "px";
var xiShu = (big.offsetWidth - 2) / magnifier.offsetWidth;//big.offsetWidth包括了2px边框的宽度
img.style.marginLeft = -xiShu * x + "px";
img.style.marginTop = -xiShu * y + "px";
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</body>
</html>
最新文章
- C++笔记----构造函数与析构函数(三)
- 配置 Docker 加速器(Docker Hub Mirror)
- java字符串大小写字母互改
- Vuejs使用笔记 --- component内部实现
- js有关时间日期的操作
- Spearman Rank(斯皮尔曼等级)相关系数及MATLAB实现
- VS2013调试时,IIS Express Worker Process 已停止工作
- Mysql时间函数
- 阻塞、非阻塞的概念和select函数的阻塞功能
- 2014年总结:我的IT路
- Red Gate系列之四 SQL Data Compare 10.2.0.885 Edition 数据比较同步工具 完全破解+使用教程
- EntityFrameWork分页
- Linux的文件系统及其硬盘分区挂载原理
- Python_异常处理结构与调试
- 使用Coding Pages托管网站
- sqlserver简便创建用户并授权
- [Swift]LeetCode921.使括号有效的最少添加 | Minimum Add to Make Parentheses Valid
- unicode解码
- Oracle创建表及管理表
- oracle基本查询入门(二) 子查询