原生JavaScript实现的简单放大镜效果示例


Posted in Javascript onFebruary 07, 2018

本文实例讲述了原生JavaScript实现的简单放大镜效果。分享给大家供大家参考,具体如下:

原理: 其实所谓的放大就是准备两张一样的图片,除大小不一样。鼠标移动到不同位置,将会显示大图片对应的图片内容。

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>放大镜效果</title>
</head>
<body>
 <div id="wrap" style="position: relative;width: 900px;margin: 0 auto;text-align: center;">
  <div id="smallImg" style="width: 400px;height: 400px; position: relative;z-index: 1;">
   <img src="small.jpg" style="width: 400px;height: 400px;"/>
   <span id="filter" style="width: 200px;height: 200px;background-color: blue;opacity: 0.1;position: absolute;top: 0;left: 0; z-index: 2;cursor: move;display: none;">
   <span>
  </div>
  <div id="bigImg" style="width: 400px;height: 400px;overflow: hidden;position: absolute;right: 0px;top: 0;display: none;">
   <img src="large.jpg" style="width: 800px;height:800px; position: absolute;left: 0;top: 0;">
  </div>
 </div>
 <script type="text/javascript">
  var filter = document.getElementById('filter');
  var smallImg = document.getElementById('smallImg');
  var bigImg = document.getElementById('bigImg');
  var wrap = document.getElementById('wrap');
  var largeImgs = bigImg.getElementsByTagName('img')[0];
  smallImg.onmouseover = function(){
   bigImg.style.display = "inline-block";
   filter.style.display = "inline-block";
  }
  smallImg.onmousemove = function(event){
   var event = event || window.event;
   var mouseleft = event.clientX - wrap.offsetLeft;
   var mousetop = event.clientY - wrap.offsetTop;
   var left = mouseleft<smallImg.offsetWidth/4?0:mouseleft>smallImg.offsetWidth*3/4?smallImg.offsetWidth/2:(mouseleft - filter.offsetWidth/2);
   var top = mousetop<smallImg.offsetHeight/4?0:mousetop>smallImg.offsetHeight*3/4?smallImg.offsetHeight/2:(mousetop - filter.offsetWidth/2);
   filter.style.left = left + "px";
   filter.style.top = top +"px";
   largeImgs.style.left = "-" + left*bigImg.offsetWidth/smallImg.offsetWidth + "px";
   largeImgs.style.top = "-" + top*bigImg.offsetHeight/smallImg.offsetHeight + "px";
  }
  smallImg.onmouseout = function(){
   bigImg.style.display = "none";
   filter.style.display = "none";
  }
 </script>
</body>
</html>

运行效果:

原生JavaScript实现的简单放大镜效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
如何使用CocosCreator对象池
Apr 14 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 #Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 #Javascript
Vue.set()实现数据动态响应的方法
Feb 07 #Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 #Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 #Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 #Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 #Javascript
You might like
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
PHP7新增函数
2021/03/09 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python使用minidom读写xml的方法
2015/06/03 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
在python中实现对list求和及求积
2018/11/14 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python列表切片操作实例总结
2019/02/19 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
通过实例解析Python return运行原理
2020/03/04 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
2014年个人师德工作总结
2014/12/04 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS