京东放大镜
作者：我和我的小生活
本文为作者原创，转载请注明出处：https://www.cnblogs.com/mmit/p/11268710.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>放大镜</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #aaa;
position: relative;
}
.box .thumb{
width: 450px;
height: 450px;
border: 1px solid #aaa;
overflow: hidden;
position: absolute;
left: 355px;
top: 0;
display: none;
}
.box .normal .zoom{
width: 200px;
height: 200px;
background-color:#fdfa04;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.thumb img{
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var box = $('zoomDiv');//normal是zoom的父节点，normal和thumb是兄弟节点
var normal = box.children[0];
var zoom = box.children[0].children[1];
var thumb = box.children[1];//这是找他的第二个孩子，box的第一个儿子是normal,第二个儿子是thumb
//先放鼠标，然后大图显示，离开，大图消失，放上去时黄色快随鼠标移动
normal.onmouseover = function(){
zoom.style.display = 'block';
thumb.style.display = 'block';
}
normal.onmouseout = function(){
zoom.style.display = 'none';
thumb.style.display = 'none';
}
var x = 0;
var y= 0;
normal.onmousemove = function(event){//这一块是防止黄块出去
var evt = event || window.event;
x = evt.clientX - this.parentNode.offsetLeft - zoom.offsetWidth / 2;
y = evt.clientY - this.parentNode.offsetTop - zoom.offsetHeight / 2;
if (x < 0) {
x = 0;
}else{
if (x > normal.offsetWidth - zoom.offsetWidth) {
x = normal.offsetWidth - zoom.offsetWidth;
}
}
if (y < 0) {
y = 0;
}else{
if (y > normal.offsetHeight - zoom.offsetHeight) {
y = normal.offsetHeight - zoom.offsetHeight;
}
}
//console.log(x + ':' + y);//比例是大图/小图，前两行是移动黄块的，中间两行是计算大图移动的像素的，后两行是移动大图的
zoom.style.left = x + 'px';
zoom.style.top = y + 'px';
var tX = -x * 800 / normal.offsetWidth;
var tY = -y *800 / normal.offsetHeight;
thumb.children[0].style.left = tX + 'px';
thumb.children[0].style.top = tY + 'px';
}
}
</script>
</head>
<body>
<div class="box" id="zoomDiv">
<div class="normal">
<img src="imgs/show.jpg" alt="">
<div class="zoom"></div>
</div>
<div class="thumb">
<img src="imgs/detail.jpg">
</div>
</div>
</body>
</html>
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· 互联网不景气了那就玩玩嵌入式吧，用纯.NET开发并制作一个智能桌面机器人（四）：结合BotSharp
· 一个基于 .NET 开源免费的异地组网和内网穿透工具
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单