首页
所有分类
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 相关文章推荐
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
HTML的select控件美化
Mar 27 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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
检讨书(456) 表扬信(62) 道歉信(39) 事迹材料(636) 邀请函(127) 证婚词(21) 介绍信(57) 欢迎词(65) 演讲稿(869) 辞职信(98)
You might like
图解上海144收音机
2021/03/02 无线电
层叠菜单的动态生成
2006/10/09 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php命令行（cli）下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
什么是 AngularJS？AngularJS简介
2014/12/06 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
GitHub 热门：Python 算法大全,Star 超过 2 万
2019/04/29 Python
Numpy之reshape()使用详解
2019/12/26 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
美国第二大连锁药店：Rite Aid
2019/04/03 全球购物
捷克家具销售网站：SCONTO Nábytek
2020/01/02 全球购物
竞聘演讲稿
2014/04/24 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
100句人生哲理语录集锦：强者征服今天，懒汉坐等明天
2019/10/18 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers