登录
当前位置： 首页 > 编程笔记 >

原生js实现放大镜效果

郭琦
2023-03-14
本文向大家介绍原生js实现放大镜效果，包括了原生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>

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

 类似资料：
  • 原生js实现放大镜特效

    本文向大家介绍原生js实现放大镜特效，包括了原生js实现放大镜特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现放大镜特效的具体代码，供大家参考，具体内容如下 掌握页面元素定位和移动 放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置 技术点：事件捕获、定位 offsetLeft与style.left的对比： 1）offsetLeft是与

  • 原生js实现放大镜

    本文向大家介绍原生js实现放大镜，包括了原生js实现放大镜的使用技巧和注意事项，需要的朋友参考一下 原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！

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

    本文向大家介绍原生js实现商品放大镜效果，包括了原生js实现商品放大镜效果的使用技巧和注意事项，需要的朋友参考一下 实现原理 大图上的放大镜：小图的显示区域=大图片大小：小图片大小=大图片的offsetLeft：小图片的offsetLeft 那么以上的公式中只有大图片的offsetLeft 是未知的，所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft 代码中有详

  • 原生JS实现简单放大镜效果

    本文向大家介绍原生JS实现简单放大镜效果，包括了原生JS实现简单放大镜效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了原生JS实现放大镜效果的具体代码，供大家参考，具体内容如下 效果图：（演示） 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • 原生js简单实现放大镜特效

    本文向大家介绍原生js简单实现放大镜特效，包括了原生js简单实现放大镜特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现放大镜特效展示的具体代码，供大家参考，具体内容如下 普及知识：放大镜特效涉及到的几个值 offsetWidth    获取元素的宽度 offsetHeight  获取元素的高度 offsetLeft父元素没有定位时，获取元素距离页面的左边距，父元素有定位时

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

    本文向大家介绍原生JS实现的放大镜效果实例代码，包括了原生JS实现的放大镜效果实例代码的使用技巧和注意事项，需要的朋友参考一下 这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。 以上所述是小编给大家介绍的原生JS实现的放大镜效果实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，

相关阅读

原生js简单实现放大镜特效原生JS实现的放大镜效果实例代码原生javascript实现图片放大镜效果原生JS实现的放大镜特效示例【测试可用】js实现详情页放大镜效果

相关文章

Singularity Data 云原生日常实习面经14.0 Zookeeper 分布式锁实现原理京东方大数据实习生凉经某大厂UI设计实习生面经北京MetaAPP大数据开发实习生

相关问答

react原生Android自定义原生模块实现错误增强现实库支持React原生？实现棱镜点物理javascript - JS页面sticky翻页效果如何实现？javascript - 原生小程序中怎么实现实现元素逐渐上移并消失的动画效果?

相关工具

图片放大镜iOS放大镜(带阴影)点击图片放大显示效果放置大地读取txt并实现翻页效果

相关文档

Python 原生爬虫教程你不懂JS: this 与对象原型清华大学开源软件镜像站使用帮助迁移到云原生应用架构基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.