首页
所有分类
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 相关文章推荐
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
对node.js中render和send的用法详解
May 14 Javascript
详解puppeteer使用代理
Dec 27 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
微信小程序 高德地图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
频率(1) 实习报告(1) RP-F11(1) 灵敏度(1) 数调机(1) 鉴频器(1) 高放电路(1) 频偏(1) TOSHIBA(1) 手调机(1)
You might like
php图片加中文水印实现代码分享
2012/10/31 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
php扩展开发入门demo示例
2019/09/23 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
Bootstrap每天必学之弹出框（Popover）插件
2016/04/25 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
python保存字符串到文件的方法
2015/07/01 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
十个Python练手的实战项目，学会这些Python就基本没问题了(推荐)
2019/04/26 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
Dogeared官网：在美国手工制作的珠宝
2019/08/24 全球购物
童装店创业计划书
2014/01/09 职场文书
本科应届生求职信
2014/08/05 职场文书
Python 中的Sympy详细使用
2021/08/07 Python