原生js实现放大镜特效_网络技术_宿州市腾雀网络科技有限公司

原生js实现放大镜特效

发布时间 - 2026-01-11 00:03:44 点击率：次

本文实例为大家分享了js实现放大镜特效的具体代码，供大家参考，具体内容如下

掌握页面元素定位和移动

放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置

技术点：事件捕获、定位

offsetLeft与style.left的对比：
1）offsetLeft是与父级元素的距离，不包过滚动条的距离
2）style.left返回的是字符串，如30px，offsetLeft返回的是数值30
3）style.lft是可读写的，offsetLeft是只读的，所以要改变div的位置只能修改style.left
4）style.left的值需要事先定义，否则取到的值为空
难点：计算：如何让小图片的放大镜和大图片同步移动

距离定位图解：

具体代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 #demo{
 display: block;
 width: 400px;
 height: 255px;
 margin: 50px;
 position: relative;
 border: 1px solid #ccc;
 }
 #small-box{
 position: relative;
 z-index: 1;
 }
 #float-box{
 display: none;
 width: 160px;
 height: 120px;
 position: absolute;
 background: #ffffcc;
 border: 1px solid #ccc;
 filter: alpha(opacity=50);
 opacity: 0.5;
 }
 #mark{
 position: absolute;
 display: block;
 width: 400px;
 height: 255px;
 background-color: #fff;
 filter: alpha(opacity=0);
 opacity: 0;
 z-index: 10;
 }
 #big-box{
 display: none;
 position: absolute;
 top: 0;
 left: 460px;
 width: 400px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #ccc;
 z-index: 1;
 }
 #big-box img{
 position: absolute;
 z-index: 5;
 }
</style>
<script>
 window.onload=function(){
 var $=function(id){
  return document.getElementById(id);
 }
 var Demo = $("demo");
 var SmallBox = $("small-box");
 var Mark = $("mark");
 var FloatBox = $("float-box");
 var BigBox = $("big-box");
 var BigBoxImage = BigBox.getElementsByTagName("img")[0];
 Mark.onmouseover = function(){
  FloatBox.style.display = "block";
  BigBox.style.display = "block";
 }
 Mark.onmouseout = function(){
  FloatBox.style.display = "none";
  BigBox.style.display = "none";
 }
 Mark.onmousemove = function(e){
  var _event = e||window.event//兼容多个浏览器的参数模式
  var left = _event.clientX - Demo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth/2;
  var top = _event.clientY - Demo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight/2;
  if(left < 0){
  left = 0;
  }else if(left > Mark.offsetWidth - FloatBox.offsetWidth){
  left = Mark.offsetWidth - FloatBox.offsetWidth;
  }
  if(top < 0){
  top = 0;
  }else if(top > Mark.offsetHeight - FloatBox.offsetHeight){
  top = Mark.offsetHeight - FloatBox.offsetHeight;
  }
  FloatBox.style.left = left + 'px';
  FloatBox.style.top = top + 'px';
  var percentX = left / (Mark.offsetWidth - FloatBox.offsetWidth);
  var percentY = top / (Mark.offsetHeight - FloatBox.offsetHeight);
  BigBoxImage.style.left = -percentX * (BigBoxImage.offsetWidth - BigBox.offsetWidth)+'px';
  BigBoxImage.style.top = -percentY * (BigBoxImage.offsetHeight - BigBox.offsetHeight)+'px';
 }
 }
</script>
<body>
<div id="demo">
 <div id="small-box">
 <div id="mark"></div>
 <div id="float-box"></div>
 <img src="img/macbook-small.jpg" />
 </div>
 <div id="big-box">
 <img src="img/macbook-big.jpg" />
 </div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 放大镜 # 原生js简单实现放大镜特效 # js图片放大镜效果实现方法详解 # 纯js仿淘宝京东商品放大镜功能 # Javascript仿京东放大镜的效果 # 原生js仿淘宝网商品放大镜效果 # js放大镜放大图片效果 # JavaScript图片放大镜效果代码[代码比较简单] # 奇妙的Javascript图片放大镜 # JavaScript 图片放大镜（可拖放、缩放效果） # js实现放大镜特效 # 的是 # 鼠标 # 大图片 # 多个 # 大家分享 # 具体内容 # 值为 # 大家多多 # 滚动条 # title # UTF # type # margin # css # charset # head # gt # html # meta # en

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何检查php是否安装swoole

下一篇：使用建站助手安全吗？关于数据隐私与网站防护的深度解析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何检查php是否安装swoole

下一篇：使用建站助手安全吗？关于数据隐私与网站防护的深度解析