VUE 图片放大特效

最新推荐文章于 2023-05-23 10:11:44 发布
最新推荐文章于 2023-05-23 10:11:44 发布
阅读量490 收藏 1
点赞数 2
分类专栏： HTML+CSS+SVG+VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43434300/article/details/108216644
版权

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VUE 图片放大特效</title>
		<style>
			body {
			  margin: 0;
			  min-height: 100vh;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  justify-content: center;
			  background-image: radial-gradient(circle, #fff 30%, #ccc);
			  padding: 0 40px;
			  font-family: "Source Sans Pro", Helvetica, sans-serif;
			  font-weight: 300;
			}
			#grid {
			  display: grid;
			  grid-template-columns: repeat(auto-fill, 150px);
			  grid-column-gap: 30px;
			  grid-row-gap: 30px;
			  align-items: center;
			  justify-content: center;
			  width: 100%;
			  max-width: 700px;
			}
			#grid .card {
			  background-color: #ccc;
			  width: 150px;
			  height: 150px;
			  transition: all 0.1s ease;
			  border-radius: 3px;
			  position: relative;
			  z-index: 1;
			  box-shadow: 0 0 5px rgba(0, 0, 0, 0);
			  overflow: hidden;
			  cursor: pointer;
			}
			#grid .card:hover {
			  -webkit-transform: scale(2);
			          transform: scale(2);
			  z-index: 2;
			  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
			}
			#grid .card:hover img {
			  -webkit-filter: grayscale(0);
			          filter: grayscale(0);
			}
			#grid .card .reflection {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  z-index: 2;
			  left: 0;
			  top: 0;
			  transition: all 0.1s ease;
			  opacity: 0;
			  mix-blend-mode: soft-light;
			}
			#grid .card img {
			  width: 100%;
			  height: 100%;
			  -o-object-fit: cover;
			     object-fit: cover;
			  -webkit-filter: grayscale(0.65);
			          filter: grayscale(0.65);
			  transition: all 0.3s ease;
			}
		</style>
	</head>
	<body>
		<div class="grid" id="grid">
			<photo-card img="img/1.jpg" link=""></photo-card>
			<photo-card img="img/2.jpg" link=""></photo-card>
			<photo-card img="img/3.jpg" link=""></photo-card>
			<photo-card img="img/4.jpg" link=""></photo-card>
			<photo-card img="img/5.jpg" link=""></photo-card>
			<photo-card img="img/6.jpg" link=""></photo-card>
			<photo-card img="img/7.jpg" link=""></photo-card>
			<photo-card img="img/8.jpg" link=""></photo-card>
		</div>
	</body>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script>
		Vue.component("photo-card", {
			template: `<a class="card"
			                :href="link"
			                target="_blank"
			                ref="card"
			                @mousemove="move"
			                @mouseleave="leave"
			                @mouseover="over">
			                  <div class="reflection" ref="refl"></div>
			                  <img :src="img"/>
			            </a>`,
			props: ["img", "link"],
			mounted() {},
			data: () => ({
				debounce: null
			}),
			methods: {
				over() {
						const refl = this.$refs.refl;
						refl.style.opacity = 1;
					},
				leave() {
					const card = this.$refs.card;
					const refl = this.$refs.refl;
					card.style.transform = `perspective(500px) scale(1)`;
					refl.style.opacity = 0;
				},
				move() {
					const card = this.$refs.card;
					const refl = this.$refs.refl;
					const relX = (event.offsetX + 1) / card.offsetWidth;
					const relY = (event.offsetY + 1) / card.offsetHeight;
					const rotY = `rotateY(${(relX - 0.5) * 60}deg)`;
					const rotX = `rotateX(${(relY - 0.5) * -60}deg)`;
					card.style.transform = `perspective(500px) scale(2) ${rotY} ${rotX}`;
					const lightX = this.scale(relX, 0, 1, 150, -50);
					const lightY = this.scale(relY, 0, 1, 30, -100);
					const lightConstrain = Math.min(Math.max(relY, 0.3), 0.7);
					const lightOpacity = this.scale(lightConstrain, 0.3, 1, 1, 0) * 255;
					const lightShade = `rgba(${lightOpacity}, ${lightOpacity}, ${lightOpacity}, 1)`;
					const lightShadeBlack = `rgba(0, 0, 0, 1)`;
					refl.style.backgroundImage = `radial-gradient(circle at ${lightX}% ${lightY}%, ${lightShade} 20%, ${lightShadeBlack})`;
				},
				scale: (val, inMin, inMax, outMin, outMax) =>
				outMin + (val - inMin) * (outMax - outMin) / (inMax - inMin)
			}
		});
		const app = new Vue({
			el: "#grid"
		});
	</script>
</html>

vue.min.js版本2.6.12

效果图：

豆皮没有豆
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue鼠标悬停图片放大特效
04-25
vue鼠标悬停图片放大特效是一款基于vue.js跟css3制作的相册图片悬停弹出3d放大展示代码。
使用vue3实现图片的放大效果
PATHION1的博客
04-17 1705
实现放大镜效果
vue点击图片预览放大（可旋转、翻转、缩放、上下切换、键盘操作）
热门推荐
狂野的心跳的博客
08-31 4万+
因项目需求（ui框架element-ui），需要实现图片的点击放大，还要能旋转以及上下切换。当时第一反应，element-ui好像没有这样的组件，就想过自己写，但是那个旋转翻页上下切换感觉有点麻烦，不甘心，就在GitHub找找找.........还真找到一个适合vue的插件，叫viewerjs，GitHub地址：https://github.com/fengyuanchen/viewerjs...
vue后台实现点击图片放大
guairena的博客
11-30 4655
点击小图可以放大，放大后，通过手势等比例放大缩小、左右切换图、旋转、关闭。由于element-ui版本较低不支持使用图片放大的image组件。 代码 父组件： 子组件 base/image/image-viewer.vue dom.js /util.js /types.js
前端Vue实现图片放大镜效果
wbb1126的博客
05-23 320
/ 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角。// 对层罩位置再一次限制，保证层罩只能在原图区域空间内。// 通过 transform 进行移动控制。/* 放大的图片，通过定位将左上角定位到(0,0) *//* 层罩，通过定位将左上角定位到(0,0) */// 控制层罩与放大空间的隐藏。// 层罩及放大空间的显示。// 鼠标进入原图空间函数。/* 右边的区域图片放大空间 */// 鼠标的坐标位置。/* 一个最高层层罩 *//* 原图的显示 *//* 原图的容器 */
vue鼠标悬停图片放大特效特效代码
03-20
以上就是使用Vue.js和CSS3实现鼠标悬停图片放大特效的基本步骤。在实际开发中，你可能还需要考虑其他因素，比如图片加载状态、响应式布局等。此外，你还可以通过第三方库如vue-image-zoom、vue-magnify等简化实现...
vue鼠标悬停图片放大特效.zip
最新发布
10-15
在“vue鼠标悬停图片放大特效.zip”这个项目中，我们可以看到一个实现图片悬停时放大效果的示例。这个特效不仅美观，而且对于提升用户体验有着积极作用，因为它允许用户预览图片的细节而无需离开当前页面。以下是对...
商城商品图片放大预览特效
02-11
图片预览特效通常基于JavaScript和CSS技术实现，尤其是jQuery或Vue等前端框架。当用户鼠标悬停在商品缩略图上时，会弹出一个放大镜效果的预览窗口，显示图片的高分辨率细节。这个窗口可以是浮动的，跟随鼠标移动，也...
网页图片放大效果
10-11
网页图片放大效果是一种常见的用户体验设计，它允许用户在不离开原始网页的情况下查看高分辨率或细节丰富的图片。在本文中，我们将深入探讨一个优秀的JavaScript库——PhotoSwipe，它为实现这一功能提供了高效且易于...
vue、js简单方法让静态图片实现动画效果
m0_57267951的博客
03-22 1147
vue、js简单方法让多张静态图片实现动画效果
vue实现点击图片放大效果
08-29
主要为大家详细介绍了vue实现点击图片放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现图片放大镜效果
jie6666的博客
12-13 5242
一、需求描述： 在使用Vue进行项目开发时，需要把产品的照片进行放大展示。方法图片随鼠标在一定范围内，移动而放大。 二、需求分析： 例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。 三、解决方案： <template
Vue实现点击图片放大功能、element-ui自带隐藏的图片查看器el-image-viewer放大预览图片
林中明月间丶
04-09 1万+
https://blog.csdn.net/qq348843576/article/details/103261567 https://blog.csdn.net/qq_36320160/article/details/102175334 父组件: <template> <div> <!-- imgBaseUrl为图片URL--> <!-- <img v-if="imgBaseUrl" style="width:100%" :src="imgBas
vue底部冒泡背景效果
Ann_52547的博客
05-05 304
【代码】vue底部冒泡背景效果。
vue实现图片轮播二
weixin_43799356的博客
08-08 403
VUE实现图片轮播
3D特效旋转相册
小王的技术库
09-22 834
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
使用vue做图片的闪光效果
随缘手札
04-05 1246
思路：使用一个空标签，宽高和图片一样，使用background-image: -moz-linear-gradient()将空标签渲染为一个渐变色的图形，然后使用transform: skewX()使得图形倾斜，然后当鼠标移到图片上时，这个图形从图片上面平移过去； <template> <div class="container"> <div class="image"> <img :src="img" alt="图片加载失败" />
【vue】图片加载动画效果
KatyLight的博客
09-19 1646
vue组件，图片加载时
前端学习（231）:box-reflect倒影
歌谣的博客
12-27 266
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
vue图片放大镜
05-31
Vue图片放大镜可以通过以下步骤实现： 1. 在Vue组件中引入所需的CSS和JS文件，例如：jquery、magnify等； 2. 在Vue组件中定义需要放大的图片，例如： ```html ``` 3. 在Vue组件的mounted()钩子函数中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

豆皮没有豆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值