原生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中的this关键字介绍与使用实例
Jun 21 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
js实现表格单列按字母排序
Aug 12 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
原生js实现随机点名
2020/07/05 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python地图绘制实操详解
2019/03/04 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
四风问题对照检查材料思想汇报
2014/10/07 职场文书
员工离职通知函
2015/04/25 职场文书
导游词之襄阳古城
2019/09/27 职场文书
python如何正确使用yield
2021/05/21 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技