js仿淘宝放大镜效果


Posted in Javascript onDecember 28, 2020

仿淘宝放大镜封装效果,供大家参考,具体内容如下

放大镜是做好了,但是没有下面小型导航无法选择放大图片,后期我会在封装出来的。由于考试当前 考完试我会在推出vue的放大效果。以下是代码:

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link href="css/index.css" rel="stylesheet">

</head>
<body>
<div class="magnify">
 <div class="magnify_conatiner">
 <div class="magnify_preview">
  <img class="sizeimg" src="../../../image/1.jpg" alt="">
  <div class="magnif_mask"></div>
  <div class="margnif_big">
  <img class="bigImg" src="../../../image/1.jpg" alt="">
  </div>
 </div>

 </div>
</div>
</div>
<script src="js/index.js"></script>
<script>

 var list = {
 BackgroundColor:'red',//遮罩层 颜色 必填
 Opacity:0.2,//遮罩层透明度 随意
 size:1.5 //放大倍数 必填

 }
 init(list)
 
</script>

</body>
</html>

2.css代码

.magnify_conatiner {
 width: 500px;
 height: 500px;
 margin: 50px 50px;
}

.magnify_conatiner .magnify_preview {
 position: relative;
 height: 400px;
 border: 1px silver solid;
 background-color: red;

}
div.magnify_preview .sizeimg {
 height: 100%;
 width: 100%;
}
.magnify_conatiner .magnify_preview .magnif_mask{
 position: absolute;
 top: 0;
 left: 0;
 opacity: .5;
 border: 1px solid #ccc;
 cursor: move;
 display: none;
}
.margnif_big{
 position: absolute;
 display: none;
 top: 0px;
 left: 501px;
 width: 450px;
 height: 450px;
 z-index: 999;
 border: 1px solid #ccc;
 overflow: hidden;
}
.margnif_big img{
 position: absolute;
 top: 0;
 left: 0;
}

3.封装的 js代码

function init(obj) {

 if (obj.BackgroundColor && obj.size) {
 var maskBigColor = obj.BackgroundColor
 var maskSize = obj.size
 var maskOpacity = obj.Opacity
 if(maskOpacity === undefined){
  maskOpacity = 0.2
 }
 var magnify_preview = document.querySelector('.magnify_preview')
 var mask = document.querySelector('.magnif_mask')
 var big = document.querySelector('.margnif_big')
 var bigIMG = document.querySelector('.bigImg')
 mask.style.height = obj.size * 100 + 'px'
 mask.style.width = obj.size * 100 + 'px'
 mask.style.backgroundColor = obj.BackgroundColor
 mask.style.opacity = maskOpacity
 magnify_preview.addEventListener('mouseover', function () {
  mask.style.display = 'block'
  big.style.display = 'block'

 })
 magnify_preview.addEventListener('mouseout', function () {
  mask.style.display = 'none'
  big.style.display = 'none'

 })
 magnify_preview.addEventListener('mousemove', function (e) {
  var x = e.pageX - this.offsetLeft
  var y = e.pageY - this.offsetTop
  var maskX = x - mask.offsetWidth / 2
  var maskY = y - mask.offsetHeight / 2
  var magnify_previewX = magnify_preview.offsetWidth
  var magnify_previewY = magnify_preview.offsetHeight
  var maskMaxX = magnify_preview.offsetWidth - mask.offsetWidth
  var maskMaxY = magnify_preview.offsetHeight - mask.offsetHeight
  if (maskX <= 0) {
  maskX = 0
  } else if (maskX >= magnify_previewX - mask.offsetWidth) {
  maskX = magnify_previewX - mask.offsetWidth
  }
  if (maskY <= 0) {
  maskY = 0
  } else if (maskY >= magnify_previewY - mask.offsetHeight) {
  maskY = magnify_previewY - mask.offsetHeight
  }
  mask.style.left = maskX + 'px'
  mask.style.top = maskY + 'px'

//大图片的移动距离 = 遮挡层的移动距离*大图片最大移动距离 / 遮挡层最大移动距离


  var bigMaxX = bigIMG.offsetWidth - big.offsetWidth
  var bigImgY = bigIMG.offsetHeight - big.offsetHeight
  var bigX = maskX * bigMaxX / maskMaxX
  var bigY = maskY * bigImgY / maskMaxY

  bigIMG.style.left = - bigX + 'px'
  bigIMG.style.top = - bigY + 'px'

 })


 } else {
 console.log('error')
 }

}

后期考完试我会继续的,图片大家自己更改吧,我没有用网图

效果展示

js仿淘宝放大镜效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
JavaScript实现原型封装轮播图
Dec 27 #Javascript
JavaScript代码实现简单计算器
Dec 27 #Javascript
JavaScript实现雪花飘落效果
Dec 27 #Javascript
微信小程序自定义胶囊样式
Dec 27 #Javascript
JS实现鼠标移动拖尾
Dec 27 #Javascript
JavaScript实现滚动加载更多
Dec 27 #Javascript
jQuery实现简单轮播图效果
Dec 27 #jQuery
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php以post形式发送xml的方法
2014/11/04 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
Python 通过URL打开图片实例详解
2017/06/01 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python sort、sort_index方法代码实例
2019/03/28 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
日化店促销方案
2014/03/26 职场文书
2015中秋祝酒词
2015/08/12 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书