全国服务热线:4008-888-888

公司新闻

预约报名小程序_原生js完成扩大镜效果

原生js实现放大镜效果       本文主要分享了原生js封装实现放大镜效果的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
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="../mon.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; 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; /*Explorer5.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-colla凡科抠图e: colla凡科抠图e; 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: #; 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 a href="huanghanzhilian/widget" target="_blank" 项目地址 /a a href="/widget/" 返回首页 /a /div div div id="magnifier1" div /div img src="widget/magnifier/img/c2.jpg" data-source="widget/magnifier/img/c2a.jpg" /li img src="widget/magnifier/img/macbook-small.jpg" data-source="widget/magnifier/img/macbook-big.jpg" /li /ul /div script type="text/javascript" new magnifier("#magnifier1"); /script div 不传参数,执行默认参数,鼠标经过预览图切换 p new magnifier("#magnifier1"); /p br/ event:"click",点击预览图切换图片,默认"mouseover" 执行默认参数 p new magnifier("#magnifier1",{ event:"click" }); /p /div div div h1 调用方法: /h1 p new magnifier(selector,{options}); /p /div h2 options参数 /h2 table thead th width="150" 参数 /th th width="100" 默认值 /th th 说明 /th /tr /thead tbody td event /td td "mouseover" /td td 可设置鼠标点击"click" /td /tr /tbody /table /div /div /body /html

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服