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 相关文章推荐
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
详解vue axios中文文档
Sep 12 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 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
php date()日期时间函数详解
2010/05/16 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
scrapy爬虫实例分享
2017/12/28 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python代码注释规范代码实例解析
2020/08/14 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
债务纠纷起诉书
2015/05/20 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript