vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）

vue版本的仿京东放大镜

<template><div class="maxBox"><divref="left"class="left"@mousemove="showImg"@mouseleave="flag = false"><imgsrc="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg"alt=""/><div v-show="flag" ref="mask" class="mask"></div></div><div v-show="flag" ref="right" class="right"><imgref="maxImg"src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg"alt=""/></div></div>
</template><script>
export default {data() {return {flag: false,};},methods: {showImg(e) {this.flag = true;let left = this.$refs.left;//  获取鼠标在 left 的当前坐标let x = e.pageX - left.offsetLeft; //x轴的let y = e.pageY - left.offsetTop;//   拿到小方块的坐标let mask = this.$refs.mask;// 小方块移动的坐标 例：小方块移动的横向坐标就是 x-小方块的一半var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// 小方块可以移动的最大横向坐标   最大盒子 - 小盒子算出可移动范围let maxX = left.offsetWidth - mask.offsetWidth;let maxY = left.offsetHeight - mask.offsetHeight;// 判断横向超出，让他不超出  移动的坐标 大于 可移动的范围  赋值为最大的值if (maskX > maxX) {maskX = maxX;} else if (maskX < 0) {maskX = 0;}//   判断纵向if (maskY > maxY) {maskY = maxY;} else if (maskY < 0) {maskY = 0;}mask.style.left = maskX + "px";mask.style.top = maskY + "px";// 右边盒子let rightBox = this.$refs.right;// 右边大图的位置let maxImg = this.$refs.maxImg;//   大图片的移动的最大距离let imgMaxX = maxImg.offsetWidth - rightBox.offsetWidth;let imgMaxY = maxImg.offsetHeight - rightBox.offsetHeight;//   放大镜图片移动的距离let imgX = maskX * (imgMaxX / maxX);let imgY = maskY * (imgMaxY / maxY);maxImg.style.left = -imgX + "px";maxImg.style.top = -imgY + "px";},},
};
</script><style lang="scss" scoped>
* {padding: 0;margin: 0;
}
.mask {width: 220px;height: 220px;background-color: rgba(29, 192, 201, 0.4);position: absolute;
}
.maxBox {width: 1000px;height: 800px;margin: 10px auto;display: flex;
}
.left {width: 350px;height: 350px;border: 1px solid rgb(209, 208, 208);position: relative;&:hover {cursor: move;}img {width: 100%;height: 100%;}
}
.right {width: 500px;height: 500px;border: 1px solid rgb(202, 202, 202);position: relative;overflow: hidden;img {width: 1000px;height: 1000px;position: absolute;flex-shrink: 0;left: 0;top: 0;}
}
</style>

原生js版本放大镜

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>* {margin: 0;padding: 0;}.goods {width: 300px;height: 400px;position: relative;margin-left: 100px;float: left;}.goods img {width: 100%;height: 100%;}.mask {width: 200px;height: 200px;background-color: rgba(247, 150, 4, 0.8);position: absolute;top: 0;left: 30px;cursor: move;display: none;}.big {width: 400px;height: 500px;position: relative;float: left;margin-left: 20px;overflow: hidden;}.big img {width: 800px;height: 1000px;position: absolute;left: 0;top: 0;}</style>
</head><body><div class="hh"><div class="goods"><img src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="" /><div class="mask"></div></div><div class="big" style="display: none"><img src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="" /></div></div><script>// 1、先获取元素var goods = document.querySelector(".goods");var mask = document.querySelector(".mask");var hh = document.querySelector(".hh");var big = document.querySelector(".big");hh.onmouseover = function () {big.style.display = "block";};hh.onmouseout = function () {big.style.display = "none";};goods.onmouseover = function () {mask.style.display = "block";};goods.onmouseout = function () {mask.style.display = "none";};goods.onmousemove = function (event) {// 2、获取鼠标在goods里面的坐标var x = event.pageX - goods.offsetLeft;var y = event.pageY - goods.offsetTop;// 3、小方块移动的坐标 例：小方块移动的横向坐标就是 x-小方块的一半var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// 4、小方块可以移动的最大横坐标var maxX = goods.offsetWidth - mask.offsetWidth;var maxY = goods.offsetHeight - mask.offsetHeight;// 判断横向超出，让他不超出if (maskX > maxX) {maskX = maxX;} else if (maskX < 0) {maskX = 0;}// 判断纵向超出，让他不超出if (maskY > maxY) {maskY = maxY;} else if (maskY < 0) {maskY = 0;}// 小方块移动的距离mask.style.left = maskX + "px";mask.style.top = maskY + "px";var big = document.querySelector(".big");var img = big.children[0];// 5、大图片移动的最大距离var imgMaxX = img.offsetWidth - big.offsetWidth;var imgMaxY = img.offsetHeight - big.offsetHeight;// 放大镜图片移动的距离var imgx = maskX * (imgMaxX / maxX);var imgy = maskY * (imgMaxY / maxY);img.style.left = -imgx + "px";img.style.top = -imgy + "px";};</script>
</body></html>

vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）相关推荐

vue版本的仿京东放大镜代码还有原生js版本的。（组件封装
src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="& ...
29 仿京东放大镜案例
1.仿京东放大镜案例功能需求: 鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,鼠标一离开隐藏2个盒子功能 // 当页面全部加载完毕,因此需要load,执行里面的js代码 window.addEv ...
仿京东放大镜效果的实现
仿京东放大镜 (1) 整个案例可以分为三个功能模块 (2) 鼠标经过小图片盒子, 绿色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能 (3)绿色的遮挡层跟随鼠标功能. (4)移动绿色遮挡层,大图片 ...
vue仿京东放大镜加商品缩略图轮播组件
以下是最终的vue版本,光滑流畅,99%还原京东放大镜甚至更好,不会出现多次操作会变卡的问题 1.vue版本 6/23日更新,处理图片尺寸过小无法通过拖动实现放大移动效果的问题 7/18日更新,关于视 ...
JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
仿京东商城左侧商品分类导航-JS网页特效
网页特效:仿京东商城左侧商品分类导航演示地址:http://www.iiwnet.com/js_menu/976.html <html xmlns="http://www.w3.or ...
html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
b站pink老师JavaScript的PC端网页特效案例代码——仿京东放大镜效果
目录原理讲解: 代码段: 1. detail.html部分(重点在标红区) 2. detail.js部分(全部都是重点) 3. detail.css部分(重点在标红区) 4. base.css部分( ...

vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）

vue版本的仿京东放大镜

原生js版本放大镜

vue版本的仿京东放大镜代码还有原生js版本的。（组件封装）相关推荐

最新文章

热门文章