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 相关文章推荐
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
第九节 绑定 [9]
2006/10/09 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
总结Python编程中函数的使用要点
2016/03/20 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Python几种常见算法汇总
2020/06/02 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
平面设计岗位职责
2013/12/14 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
入伍通知书
2015/04/23 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python