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 相关文章推荐
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
$.extend 的一个小问题
Jun 18 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
使用vue制作滑动标签
Sep 21 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
viewer.js实现图片预览功能
Jun 24 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下常用正则表达式整理
2010/10/26 PHP
php根据年月获取季度的方法
2014/03/31 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery插件实现图片轮播特效
2016/06/16 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
JS document内容及样式操作完整示例
2020/01/14 Javascript
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python如何实现动态数组
2019/11/02 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
咖啡书吧创业计划书
2014/01/13 职场文书
法人授权委托书
2014/04/03 职场文书
我的祖国演讲稿
2014/05/04 职场文书
社区维稳工作方案
2014/06/06 职场文书
2014年国庆节寄语
2014/09/19 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
初中团委工作总结
2015/08/13 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
同学聚会开幕词
2019/04/02 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
Python 统计序列中元素的出现频度
2022/04/26 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers