这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了原生 js 封装实现放大镜效果的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
话不多说,请看代码
- <!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0530/328625.html