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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
编写React组件项目实践分析
Mar 04 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php 变量定义方法
2009/06/14 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
php封装的page分页类完整实例
2016/10/18 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python Deque 模块使用详解
2014/07/04 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python之修改图片像素值的方法
2019/07/03 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
通过代码实例了解Python sys模块
2020/09/14 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
关于运动会的稿件
2014/02/02 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
鸟的天堂导游词
2015/01/31 职场文书
认真学习保证书
2015/02/26 职场文书
优秀团员个人总结
2015/02/26 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs