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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
javascript 数组排序函数
Aug 20 Javascript
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
Javascript实现关闭广告效果
Jan 29 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
会计专业应届生自荐信
2014/06/28 职场文书
教师个人发展总结
2015/02/11 职场文书
优秀团员个人总结
2015/02/26 职场文书
实施意见格式范本
2015/06/05 职场文书
开业典礼致辞
2015/07/29 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python