原生js实现放大镜效果

时间：2021-05-25

话不多说，请看代码

<!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; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .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{ } .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; } .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:///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实现放大镜效果

相关文章

原生JS实现的放大镜效果实例代码

js实现简单放大镜效果

用JS实现购物网站商品放大镜效果

jquery实现放大镜简洁代码(推荐)

js面向对象之实现淘宝放大镜