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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 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 字符串 小常识
2009/06/05 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
python实现巡检系统(solaris)示例
2014/04/02 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Django 拆分model和view的实现方法
2019/08/16 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
大学生工作自荐书
2014/06/16 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
读后感作文评语
2014/12/25 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Python 图片添加美颜效果
2022/04/28 Python