原生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>

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

赞 (0)

相关推荐

  • 原生js实现商品放大镜效果

    实现原理 大图上的放大镜:小图的显示区域=大图片大小:小图片大小=大图片的offsetLeft:小图片的offsetLeft 那么以上的公式中只有大图片的offsetLeft 是未知的,所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft 代码中有详细注释 完整代码 注:复制到本地后自行替换图片查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta http-equ

  • 用javascript制作放大镜放大图片

    用javascript制作放大镜放大图片

    emu 原图: 局部放大图: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js放大镜放大购物图片效果

    图片放大镜效果,供大家参考,具体内容如下 一难点:不让黄盒子出界 二难点:让大盒子相应移动(比例) <html lang="en"> <head> <meta charset="UTF-8"> <title>我的放大镜</title> <style> *{ margin: 0; padding: 0; } .box{ margin: 100px; position: relative; } .s

  • JavaScript 图片切割效果(放大镜)第1/4页

    JavaScript 图片切割效果(放大镜)第1/4页

    上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了. 近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了. 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 . 效果预览请看这里 完整实例下载代码太多贴不出来,只好给个效果图: 程序说明 这个效果主要分三个部分:层的拖放.层的缩放.图片切割(包括预览). 其中 层的拖放 和 层的缩放 我已经在其他两篇

  • 电子商务网站上的常用的js放大镜效果

    复制代码 代码如下: jsFiddleRun again Edit this fiddle Result HTML <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>放大镜</title> <style> img{ vertical-align:bottom;} .mod_zoom{ overflow:hidden; zoom:

  • 奇妙的Javascript图片放大镜

    奇妙的Javascript图片放大镜

    在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜.现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果. 制作思路:"放大镜"后有一幅背景图,它是"放大了"的图的原本.我们通过移动"放大镜"时适当调整背景图的位置,使它显示的刚好是需要要放大的部分. 效果演示: (点这里在新窗口中查看) 制作步骤: 1)先准备两幅内容相同尺寸不同的图片,这里我们找了一个400×300像素的缩略图small_hill.gif,一

  • JavaScript图片放大镜效果代码[代码比较简单]

    JavaScript图片放大镜效果代码[代码比较简单]

    #div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;} #div1 img{width:304px; height:222px;} #div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); op

  • 用js实现放大镜的效果的简单实例

    用js实现放大镜的效果的简单实例

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

  • JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

    前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

  • 原生js写的放大镜效果

    原生js写的放大镜效果

    我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动.不废话了,看代码. 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>放大镜</title> <meta name="Keywords" content=""> <me

随机推荐