编程 Javascript

原生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实现的简单放大镜效果示例

- Author -

karenYin0828

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 纯数字不重复排列的另类方法

Jul 17 Javascript

javascript代码加载优化方法

Jan 30 Javascript

jQuery boxy弹出层插件中文演示及使用讲解

Feb 24 Javascript

使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

Jun 24 Javascript

jQuery的事件预绑定

Dec 05 Javascript

微信小程序 http请求的session管理

Jun 07 Javascript

angular5 httpclient的示例实战

Mar 12 Javascript

用Axios Element实现全局的请求loading的方法

Mar 15 Javascript

jQuery+Cookie实现切换皮肤功能【附源码下载】

Mar 25 jQuery

13 个npm 快速开发技巧(推荐)

Jul 04 Javascript

JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

Apr 28 Javascript

微信小程序自定义modal弹窗组件的方法详解

Dec 20 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