DOM经典例子（放大镜）

首先声明一下，我的两张图片是400 300和800 600的，所以代码中的div大小设置也是依赖于这个的。
如果图片大小更换，代码中的div的大小也要改变，而且如果两张图片要求是1:2的。

我把我的图片页拿出来了。。。

OK，代码附上。。。。。。。。。。。。。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#small {width: 400px;height: 300px;float: left;position: relative;}#big {width: 400px;height: 300px;float: left;/* 多余部分隐藏 */overflow: hidden;display: none;position: relative;}#drag {width: 200px;height: 150px;background-color: rgba(255, 255, 255, 0.5);position: absolute;left: 0;top: 0;display: none;}#big img {position: absolute;left: 0;top: 0;}</style>
</head><body><div id="small"><img src="small.jpg" alt=""><div id="drag"></div></div><div id="big"><img src="big.jpg" alt=""></div><script>var oSma = document.getElementById("small");var oBig = document.getElementById("big");var oDrag = document.getElementById("drag");var oImg = oBig.getElementsByTagName("img")[0];//小图片放大镜移入事件oSma.onmouseover = function (e) {oDrag.style.display = "block";oBig.style.display = "block";//设置放大镜活动范围var maxWidth = oSma.offsetWidth - oDrag.offsetWidth;var maxHeight = oSma.offsetHeight - oDrag.offsetHeight;//放大镜的移动oSma.onmousemove = function (e) {oDrag.style.left = e.clientX - oDrag.offsetWidth / 2 + "px";oDrag.style.top = e.clientY - oDrag.offsetHeight / 2 + "px";//判断放大镜是否移出范围if (oDrag.offsetLeft < 0) {oDrag.style.left = 0;}if (oDrag.offsetLeft > maxWidth) {oDrag.style.left = maxWidth + "px";}if (oDrag.offsetTop < 0) {oDrag.style.top = 0;}if (oDrag.offsetTop > maxHeight) {oDrag.style.top = maxHeight + "px";}//大图片的移动oImg.style.left = -(oDrag.offsetLeft * 2) + "px";oImg.style.top = -(oDrag.offsetTop * 2) + "px";}}//小图片放大镜移出事件oSma.onmouseout = function () {oDrag.style.display = "none";oBig.style.display = "none";}</script>
</body></html>

DOM经典例子（放大镜）相关推荐

python爬虫经典教程-python爬虫经典例子有哪些
python爬虫例子:首先导入爬虫的库,生成一个response对象:然后设置编码格式,并打印状态码:最后输出爬取的信息,代码为[print(response.text)]. python爬虫例子: ...
算法-动态规划学习（含经典例子分析）
文章目录前言一.动态规划是什么? 二.经典例子爬楼梯问题挖金矿问题三.总结前言在leetcode刷题的过程中,碰到了许多动态规划相关的题目,故系统性的学习了动态规划算法.此文章总结了学习 ...
graphviz 经典例子
以下在Jupyter Notebook中编辑运行: # 由于pygraphviz的功能有点少,基本放弃对它的使用,改用python库 graphviz 进一步原因如下: # graphviz 是用于& ...
面向对象经典例子理解
Java面向对象(转) Java语言是面向对象的.Java语言提供类.接口和继承等原语,为了简单起见,只支持类之间的单继承,但支持接口之间的多继承,并支持类与接口之间的实现机制(关键字为impleme ...
一个经典例子让你彻彻底底理解java回调机制
以前不理解什么叫回调,天天听人家说加一个回调方法啥的,心里想我草,什么叫回调方法啊?然后自己就在网上找啊找啊找,找了很多也不是很明白,现在知道了,所谓回调:就是A类中调用B类中的某个方法C,然后B类中 ...
博弈论66个经典例子_「百大管理学定律」博弈论Game Theory
博弈论(Game Theory),博弈论是指研究多个个体或团队之间在特定条件制约下的对局中利用相关方的策略,而实施对应策略的学科.有时也称为对策论,或者赛局理论,是研究具有斗争或竞争性质现象的理论和方 ...
空间换时间，查表法的经典例子
前言上一篇分享了:C语言精华知识:表驱动法编程实践这一篇再分享一个查表法经典的例子. 我们怎么衡量一个函数/代码块/算法的优劣呢?这需要从多个角度看待.本篇笔记我们先不考虑代码可读性.规范性.可移 ...
信度和效度经典例子_浅析经典目标检测评价指标--mmAP（一）
大家好,我是旷视科技南京研究院研究员赵博睿,主要研究领域为目标检测.今天和大家聊聊mmAP的那些事- 目标检测是计算机视觉领域的一项基础问题,在许多智能场景的落地应用中目标检测通常都是视觉感知的第一步 ...
蒙太奇经典例子_剧本中如何写好蒙太奇？这15个硬核案例告诉你！
交流沟通请添加小编微信:TMBB1000 蒙太奇在当代剧本中随处可见,无论什么题材,电影人和编剧总是不厌其烦地运用这一技巧.但哪些电影拥有最棒的蒙太奇片段?我们又能从中学到什么? 蒙太奇本质上是一种 ...

DOM经典例子（放大镜）

DOM经典例子（放大镜）相关推荐

最新文章

热门文章