基于JavaScript实现放大镜效果

基于JavaScript实现放大镜效果

描述：右侧图片必须是左侧图片的倍数大，主要是获取鼠标相对与被触发元素的坐标位置，再通过位置定位实现效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>放大镜效果</title><style type="text/css">*{margin: 0; padding: 0;}#left{width: 400px; height: 400px; background: url(./400x400.jpg) no-repeat 0 0/100% 100%;float: left; margin-left: 20px;position: relative;cursor: crosshair;}#box{/* 大小应该是图片的四分之一 */width: 200px; height: 200px; background: rgba(0, 0, 0, 0.3);position: absolute; top: 0; left: 0;display: none;}#cover{width: 400px; height: 400px; background: rgba(0, 0, 0, 0);position: absolute; top: 0; left: 0;}#right{width: 400px; height: 400px; float: left; margin-left: 20px;position: relative; overflow: hidden;display: none;}#pic{position: absolute; top:0; left:0;}</style><script>window.onload = function(){// 给left元素绑定鼠标移动事件var left = document.getElementById("left");var box = document.getElementById("box");var right = document.getElementById("right");left.onmousemove = function(event){// 获取事件对象var ev = window.event || event;// 获取鼠标与元素的位置，相对于被触发的元素left左上角位置var m_left = ev.layerX || ev.offsetX;var m_top = ev.layerY || ev.offsetY;// document.title = (m_left + "|" + m_top);// 计算box的位置var box_left = m_left-100;var box_top = m_top-100;document.title = (box_left + "|" + box_top);// 设置box移动条件box_left = box_left<0?0:box_left;box_top = box_top<0?0:box_top;box_left = box_left>200?200:box_left;box_top = box_top>200?200:box_top;// 让box动起来box.style.left = box_left + "px";box.style.top = box_top + "px";// 让右边图片动起来pic.style.left = "-" + box_left*2 + "px";pic.style.top = "-" + box_top*2 + "px";};// 鼠标移入图片显示left.onmouseover = function(){box.style.display = "block";right.style.display = "block";};// 鼠标移出事件left.onmouseout = function(){box.style.display = "none";right.style.display = "none";};}</script></head>
<body><!-- 左边图片 --><div id="left"><!-- 铺抓图片的表框 --><div id="box"></div><!-- 遮罩层 --><span id="cover"></span></div><!-- 右边图片，该图片应该是左边图片的倍数大 --><div id="right"><img src="./800x800.jpg" width="800" id="pic"></div></body>
</html>

基于JavaScript实现放大镜效果相关推荐

十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
Javascript实现放大镜效果（手把手教会+详细注释+完整代码）
今天来实现一个类似于淘宝京东商品店铺首页的放大镜效果!!! 具体实现效果如下图所示案例分析 1.要实现放大镜效果,我们需要做哪些准备工作? 答: 我们首先需要创建三个盒子,分别对应的是小图片,大图片 ...
JavaScript 设置放大镜效果
效果要求 1.鼠标移至图片上方,鼠标周围出现黄色的的正方形框,黄色矩形框会随着鼠标的移动而移动: 2.将黄色正方形框里的内容的长和宽均放大2.4倍,并在图片右边进行显示. 实现原理: 为对应的元素绑定 ...
javaScript实现放大镜效果
放大镜效果图如下: 2个比例核心: 右侧大图宽高设置左侧展示图大小 / 遮罩层 = 右侧大图大小? / 右侧放大镜盒子放大镜移动距离设置遮罩层移动位置 / 遮罩层宽高 = 右侧大图left | to ...
JavaScript - 京东放大镜效果：鼠标移动查看图片放大细节
效果 JS代码 window.addEventListener('load', function () {//获取元素var small = document.querySelector('.prev ...
原生javascript实现放大镜效果
2019独角兽企业重金招聘Python工程师标准>>> html部分: <div class="main"><div id="xiao ...
逆战班-----javascript实现放大镜效果
CSS部分代码 *.a_box{width:300px;height: 300px;position: absolute;left: 50px;top:50px;border: #000000 sol ...
仿京东商城商品图片缩略图+放大镜效果
Jquery包文件及样式下载具体效果可参考京东商城商品图片展示第一步:需要导入Jquery包文件和样式文件(放在<head></head>中间): <script s ...
javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

基于JavaScript实现放大镜效果

基于JavaScript实现放大镜效果

基于JavaScript实现放大镜效果相关推荐

最新文章

热门文章