首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现放大镜效果

Posted in Javascript onJanuary 11, 2017

话不多说，请看代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>放大镜-原生js封装</title>
 <link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
 <link rel="icon" href="../public/image/favicon.png" type="images/png"/>
 <link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
 <link rel="stylesheet" type="text/css" href="../public/style/common.css">
 <style type="text/css">
 /*公共*/
 html{
 height:100%;
 }
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
 margin: 0;
 padding: 0
 }
 body{
 position: relative;
 min-height:100%;
 font-size:14px;
 font-family: Tahoma, Verdana,"Microsoft Yahei";
 color:#333;
 }
 a{
 text-decoration: none;
 color:#333;
 }
 .header{
 width: 960px;
 padding-top: 15px;
 margin: 0 auto;
 line-height: 30px;
 text-align: right;
 }
 .header a{
 margin: 0 5px;
 }
 .main{
 width:960px;
 margin: 50px auto 0;
 }
 .code{
 border:1px dashed #e2e2e2;
 padding:10px 5px;
 margin-bottom:25px;
 }
 pre {
 font-family: "Microsoft Yahei",Arial,Helvetica;
 white-space: pre-wrap; /*css-3*/ 
 white-space: -moz-pre-wrap; /*Mozilla,since1999*/ 
 white-space: -pre-wrap; /*Opera4-6*/ 
 white-space: -o-pre-wrap; /*Opera7*/ 
 word-wrap: break-word; /*InternetExplorer5.5+*/
 }
 .example{
 padding-top:40px;
 margin-bottom:90px;
 }
 .example .call{
 padding:18px 5px;
 background:#f0f5f8;
 }
 .example h2{
 padding-top:20px;
 margin-bottom:7px;
 }
 .example table {
 width:100%;
 table-layout:fixed;
 border-collapse: collapse;
 border-spacing: 0;
 border: 1px solid #cee1ee;
 border-left: 0;
 }
 .example thead {
 border-bottom: 1px solid #cee1ee;
 background-color: #e3eef8;
 }
 .example tr {
 line-height: 24px;
 font-size: 13px;
 }
 .example tr:nth-child(2n) {
 background-color: #f0f5f8;
 }
 .example tr th,.example tr td {
 border-left: 1px solid #cee1ee;
 word-break: break-all;
 word-wrap: break-word;
 padding:0 10px;
 font-weight: normal;
 }
 .example tr th {
 color: #555;
 padding-top: 2px;
 padding-bottom: 2px;
 text-align: left;
 }
 /*公共*/
 .magnifier-box{
 margin-bottom: 15px;
 }
 .magnifier-container{
 width: 400px;
 height: 255px;
 margin: 50px;
 position: relative;
 border: 1px solid #ccc;
 }
 .magnifier-small{
 position: relative;
 z-index: 1;
 width: 100%;
 height: 100%;
 overflow: hidden;
 }
 .magnifier-small img{
 /*max-width: 100%;
 max-height: 100%;*/
 }
 .magnifier-mark {
 position: absolute;
 display: block;
 width: 400px;
 height: 255px;
 background-color: #fff;
 filter: alpha(opacity:0);
 opacity: 0;
 z-index: 10;
 }
 .magnifier-float-box {
 display: none;
 width: 160px;
 height: 120px;
 position: absolute;
 background: #ffffcc;
 border: 1px solid #ccc;
 filter: alpha(opacity:50);
 opacity: 0.5;
 }
 .magnifier-big-box {
 display: none;
 position: absolute;
 top: 0;
 left: 460px;
 width: 400px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #ccc;
 z-index: 1;
 }
 .magnifier-big-box img {
 position: absolute;
 z-index: 5;
 }
 .magnifier-thumb{}
 .magnifier-thumb li{
 display: inline-block;
 width: 50px;
 height: 50px;
 vertical-align: middle;
 line-height: 50px;
 margin-right: 5px;
 border: 2px solid #fff;
 /*display: table-cell;*/
 }
 .magnifier-thumb li.active{
 border-color: #f40;
 }
 .magnifier-thumb li img{
 max-width: 50px;
 max-height: 50px;
 vertical-align: middle;
 }
 </style>
 <script type="text/javascript">
 /*封装代码*/
 (function() {
 var Magnifier = function(el, opts) {
 var self = this;
 var defaults = {
 event: "mouseover",
 }
 opts = opts || {};
 for (var w in defaults) {
 if ("undefined" == typeof opts[w]) {
  opts[w] = defaults[w];
 }
 }
 this.params = opts;
 this.container = r(el);
 if (this.container.length > 1) {
 var x = [];
 return this.container.each(function() {
  x.push(new Magnifier(this, opts))
 }), x
 }
 this.containers = this.container[0];
 this.contbox = this.container.find(".magnifier-container")[0];
 this.conmain = this.container.find(".magnifier-container")[0];
 this.init();
 }
 Magnifier.prototype = {
 init: function() {
 var self = this;
 this.rendDom();
 this.mark = this.container.find(".magnifier-mark")[0];
 this.float_box = this.container.find(".magnifier-float-box")[0];
 this.big_box = this.container.find(".magnifier-big-box");
 this.small = this.container.find(".magnifier-small")[0];
 this.big_Image = this.big_box.find("img")[0];
 this.event();
 },
 //渲染dom
 rendDom: function() {
 var self = this;
 var initimg = this.container.find(".magnifier-thumb li img")[0].getAttribute("src");
 var initimgs = this.container.find(".magnifier-thumb li img")[0].getAttribute("data-source");
 var small = document.createElement("div");
 small.className = "magnifier-small";
 var mark = document.createElement("div");
 mark.className = "magnifier-mark";
 var float = document.createElement("div");
 float.className = "magnifier-float-box";
 var img = document.createElement("img");
 img.setAttribute("src", initimg)
 small.appendChild(mark);
 small.appendChild(float);
 small.appendChild(img);
 var big_box = document.createElement("div");
 big_box.className = "magnifier-big-box";
 var boximg = document.createElement("img");
 boximg.setAttribute("src", initimgs);
 big_box.appendChild(boximg);
 this.conmain.appendChild(small);
 this.conmain.appendChild(big_box);
 this.boximg = this.container.find(".magnifier-small img")[0];
 this.tabimg();
 },
 //执行切换图片
 tabimg: function() {
 var self = this;
 this.tabimgs = this.conmain = this.container.find(".magnifier-thumb li");
 for (var i = 0; i < this.tabimgs.length; i++) {
  self.tabimgs[i].addEventListener(this.params.event, function() {
  for (var j = 0; j < self.tabimgs.length; j++) {
  self.tabimgs[j].className = "";
  }
  this.className = "active";
  var onec = this.children[0].getAttribute("src");
  var onecd = this.children[0].getAttribute("data-source");
  self.change(onec, onecd);
  }, false);
 }
 },
 //改变大小图片
 change: function(o, b) {
 this.boximg.setAttribute("src", o);
 this.big_Image.setAttribute("src", b);
 },
 //执行初始化鼠标事件
 event: function() {
 var self = this;
 self.mark.addEventListener('mouseover', function() {
  self.float_box.style.display = "block";
  self.big_box[0].style.display = "block";
 }, false);
 self.mark.addEventListener('mouseout', function() {
  self.float_box.style.display = "none";
  self.big_box[0].style.display = "none";
 }, false);
 self.mark.addEventListener('mousemove', function(e) {
  var e = e || window.event; //兼容多个浏览器的event参数模式
  self.moveevent(e)
 }, false);
 },
 //开始移动
 moveevent: function(e) {
 var self = this;
 var left = e.clientX - this.contbox.offsetLeft - this.small.offsetLeft - this.float_box.offsetWidth / 2;
 var top = e.clientY - this.contbox.offsetTop - this.small.offsetTop - this.float_box.offsetHeight / 2;
 if (left < 0) {
  left = 0;
 } else if (left > (this.mark.offsetWidth - this.float_box.offsetWidth)) {
  left = this.mark.offsetWidth - this.float_box.offsetWidth;
 }
 if (top < 0) {
  top = 0;
 } else if (top > (this.mark.offsetHeight - this.float_box.offsetHeight)) {
  top = this.mark.offsetHeight - this.float_box.offsetHeight;
 }
 this.float_box.style.left = left + "px";
 this.float_box.style.top = top + "px";
 var percentX = left / (this.mark.offsetWidth - this.float_box.offsetWidth);
 var percentY = top / (this.mark.offsetHeight - this.float_box.offsetHeight);
 this.big_Image.style.left = -percentX * (this.big_Image.offsetWidth - this.big_box[0].offsetWidth) + "px";
 this.big_Image.style.top = -percentY * (this.big_Image.offsetHeight - this.big_box[0].offsetHeight) + "px";
 }
 }
 var r = (function() {
 var e = function(e) {
 var a = this,
  t = 0;
 for (t = 0; t < e.length; t++) {
  a[t] = e[t];
 }
 return a.length = e.length, this
 };
 e.prototype = {
 addClass: function(e) {
  if ("undefined" == typeof e) return this;
  for (var a = e.split(" "), t = 0; t < a.length; t++)
  for (var r = 0; r < this.length; r++) this[r].classList.add(a[t]);
  return this
 },
 each: function(e) {
  for (var a = 0; a < this.length; a++) e.call(this[a], a, this[a]);
  return this
 },
 html: function(e) {
  if ("undefined" == typeof e) return this[0] ? this[0].innerHTML : void 0;
  for (var a = 0; a < this.length; a++) this[a].innerHTML = e;
  return this
 },
 find: function(a) {
  for (var t = [], r = 0; r < this.length; r++)
  for (var i = this[r].querySelectorAll(a), s = 0; s < i.length; s++) t.push(i[s]);
  return new e(t)
 },
 append: function(a) {
  var t, r;
  for (t = 0; t < this.length; t++)
  if ("string" == typeof a) {
  var i = document.createElement("div");
  for (i.innerHTML = a; i.firstChild;) this[t].appendChild(i.firstChild)
  } else if (a instanceof e)
  for (r = 0; r < a.length; r++) this[t].appendChild(a[r]);
  else this[t].appendChild(a);
  return this
 },
 }
 var a = function(a, t) {
 var r = [],
  i = 0;
 if (a && !t && a instanceof e) {
  return a;
 }
 if (a) {
  if ("string" == typeof a) {
  var s, n, o = a.trim();
  if (o.indexOf("<") >= 0 && o.indexOf(">") >= 0) {
  var l = "div";
  for (0 === o.indexOf("<li") && (l = "ul"), 0 === o.indexOf("<tr") && (l = "tbody"), (0 === o.indexOf("<td") || 0 === o.indexOf("<th")) && (l = "tr"), 0 === o.indexOf("<tbody") && (l = "table"), 0 === o.indexOf("<option") && (l = "select"), n = document.createElement(l), n.innerHTML = a, i = 0; i < n.childNodes.length; i++) r.push(n.childNodes[i])
  } else
  for (s = t || "#" !== a[0] || a.match(/[ .<>:~]/) ? (t || document).querySelectorAll(a) : [document.getElementById(a.split("#")[1])], i = 0; i < s.length; i++) s[i] && r.push(s[i])
  } else if (a.nodeType || a === window || a === document) {
  r.push(a);
  } else if (a.length > 0 && a[0].nodeType) {
  for (i = 0; i < a.length; i++) {
  r.push(a[i]);
  }
  }
 }
 return new e(r)
 };
 return a;
 }())
 window.magnifier = Magnifier;
 })()
 /*封装代码*/
 </script>
</head>
<body>
 <div class="header">
 <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
 <a href="/widget/">返回首页</a>
 </div>
 <div class="main">
 <div class="magnifier-box" id="magnifier1">
 <div class="magnifier-container"></div>
 <ul class="magnifier-thumb">
 <li class="active">
 <img src="http://www.huanghanlian.com/widget/magnifier/img/c2.jpg" data-source="http://www.huanghanlian.com/widget/magnifier/img/c2a.jpg">
 </li>
 <li>
 <img src="http://www.huanghanlian.com/widget/magnifier/img/macbook-small.jpg" data-source="http://www.huanghanlian.com/widget/magnifier/img/macbook-big.jpg">
 </li>
 </ul>
 </div>
 <script type="text/javascript">
 new magnifier("#magnifier1");
 </script>
 <div class="code">
 <p>
 不传参数，执行默认参数，鼠标经过预览图切换
 </p>
 <p>new magnifier("#magnifier1");</p><br/>
 <p>
 event:"click"，点击预览图切换图片，默认"mouseover" 执行默认参数
 </p>
 <p>new magnifier("#magnifier1",{
 event:"click"
 });</p>
 </div>
 <div class="example">
 <div class="call">
 <h1>调用方法：</h1>
 <p>new magnifier(selector,{options});</p>
 </div>
 <h2>options参数</h2>
 <table>
 <thead>
 <tr>
 <th width="150">参数</th>
 <th width="100">默认值</th>
 <th>说明</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>event</td>
 <td>"mouseover"</td>
 <td>可设置鼠标点击"click"</td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

原生js实现放大镜效果

- Author -

继小鹏

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

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
JavaScript中的Document文档对象
Jan 16 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
JavaScript 事件系统
Jul 22 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
微信小程序 高德地图SDK详解及简单实例（源码下载）
Jan 11 #Javascript
微信小程序开发经验总结（推荐）
Jan 11 #Javascript
bootstrap手风琴制作方法详解
Jan 11 #Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 #Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 #Javascript
js仿iphone秒表功能 计算平均数
Jan 11 #Javascript
jQuery实现限制文本框的输入长度
Jan 11 #Javascript
swing(1) Windows Server(4) cudn(1) RTX 3050 ti(1) calc(1) SandBox(1) webpack(1) Git(3) OpenFeign(1) K8s(1)
You might like
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
使用vue-cli（vue脚手架）快速搭建项目的方法
2018/05/21 Javascript
小程序自定义日历效果
2018/12/29 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
Vue分页器实现原理详解
2019/06/28 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Python实现备份文件实例
2014/09/16 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Vision Directa智利眼镜网：框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
美国基督教约会网站：ChristianCafe.com
2020/02/04 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
担保书格式及范文
2014/04/01 职场文书
班级团队活动方案
2014/08/14 职场文书
批评与自我批评总结
2014/10/17 职场文书
鉴史问廉观后感
2015/06/10 职场文书
入党函调证明材料
2015/06/19 职场文书
心理学培训心得体会
2016/01/22 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
详解如何使用Nginx解决跨域问题
2022/05/06 Servers