原生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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
深入探究node之Transform
Jul 20 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
Vue实现Layui的集成方法步骤
Apr 10 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实现批量修改文件名的方法示例
2019/09/18 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
React复制到剪贴板的示例代码
2017/08/22 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Python实现字典依据value排序
2016/02/24 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python 实现链表实例代码
2017/04/07 Python
flask中的wtforms使用方法
2018/07/21 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
建筑设计专业求职自我评价
2014/03/02 职场文书
2014年政教处工作总结
2014/12/20 职场文书
青岛海底世界导游词
2015/02/11 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
2015年国培研修感言
2015/08/01 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
MySQL sql模式设置引起的问题
2022/05/15 MySQL