原生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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
js实现星星打分效果
Jul 05 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
基于mysql的bbs设计(一)
2006/10/09 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
全面解析Bootstrap表单样式的使用
2016/09/09 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
公路绿化方案
2014/05/12 职场文书
环保倡议书500字
2014/05/15 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
2014年工商所工作总结
2014/12/09 职场文书
创业计划书介绍
2019/04/24 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技