这种鼠标悬浮,图片放大,鼠标移出,图片变回原来的大小,是如何实现的?

news/2024/7/9 23:56:25 标签: vue, css3, 动画

在这里插入图片描述

在Vue中实现鼠标悬浮时图片放大效果,以及鼠标移出时图片恢复原来大小,可以使用Vue的事件绑定和样式绑定功能来完成。以下是一个基本的示例:

  1. 首先,在Vue组件中,定义一个数据属性来控制图片的放大和恢复:
vue"><template>
  <div>
    <img
      :src="imageSrc"
      :style="imageStyle"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
      alt="放大图片"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '路径/到/您的图片.jpg',
      isHovered: false,
    };
  },
  computed: {
    imageStyle() {
      return {
        transform: this.isHovered ? 'scale(1.2)' : 'scale(1)',
        transition: 'transform 0.3s ease-in-out',
      };
    },
  },
  methods: {
    handleMouseEnter() {
      this.isHovered = true;
    },
    handleMouseLeave() {
      this.isHovered = false;
    },
  },
};
</script>

<style>
/* 可以添加一些自定义样式来修饰图片容器等 */
</style>

在这个示例中,我们使用imageStyle计算属性来根据isHovered的状态来设置图片的放大效果。当鼠标悬浮在图片上时,isHovered会被设置为true,图片会应用放大的transform样式;当鼠标移出图片时,isHovered会被设置为false,图片会恢复原来的大小。

scale(1.2) 不是 JavaScript 或 Vue 的函数,它是 CSS 中的一个变换函数,用于对元素进行缩放操作。具体来说,它会将元素按照指定的比例进行放大。

在前面的代码示例中,transform: scale(1.2) 是应用于图片元素的样式,当 isHoveredtrue 时,图片会按照比例 1.2 进行放大。这是通过 CSS3 的 transform 属性实现的。

要了解更多有关 CSS 变换函数的信息,您可以查阅 CSS 变换(Transform)的文档。这些函数允许您在网页上创建各种动画和交互效果。


http://www.niftyadmin.cn/n/4927366.html

相关文章

【Unity细节】Unity打包后UI面板消失是怎么回事

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 收录于专栏&#xff1a;unity细节和bug ⭐关于物体的动画碰到其他碰撞器后停止播放的问题⭐ 文章目录 ⭐关于物体的动画碰…

linux脚本

程序后台运行&#xff1a; nohup java -jar xxx.jar &>hello.log & 后台运行java-jar命令&#xff0c;并且将日志输出到hello.log文件 防火墙&#xff1a; 开启防火墙&#xff1a;systemctl start firewalld 开放指定端口&#xff1a;firewall-cmd --zonepublic --…

maven-compiler-plugin complierArgs is not allowed here

maven-compiler-plugin complierArgs is not allowed here 问题 IEDA 报红complierArgs is not allowed here 解决方案 如果maven插件maven-compiler-plugin参数complierArgs报红&#xff0c;可以尝试将插件版本更新到3.7.0版本以上

python视频流截图(按帧数)

一、安装opencv计算机视觉库 pip install opencv-python二、视频流截图 1、读取视频文件&#xff0c;获取视频帧数 import cv2 # 视频位置 video_path path_file_name # 读取视频 cap cv2.VideoCapture(video_path) # 获取视频总帧数 frame_count cap.get(cv2.CAP_PROP_F…

Effective Java笔记(32)谨慎并用泛型和可变参数

故事的小黄花 从出生那年就飘着 童年的荡秋千 随记忆一直晃到现在 可变参数&#xff08; vararg &#xff09; 方法&#xff08;详见第 53 条&#xff09;和泛型都是在 Java 5 中就有了&#xff0c;因此你可能会期待它们可以良好地相互作用&#xff1b;遗憾的是&#xff0c;它们…

8.9黄金最新行情走势分析及短线交易策略

近期有哪些消息面影响黄金走势&#xff1f;黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周三&#xff08;8月9日&#xff09;现货黄金维持震荡&#xff0c;目前交投于1930美元附近&#xff0c;隔日现货黄金盘中震荡下行&#xff0c;失守1930关口并在美盘时段…

Unity悬浮显示提示内容

在编写unity时&#xff0c;需要实现鼠标在某一个按钮上时&#xff0c;就显示其子物体中对应的下拉菜单&#xff0c;为此编写了一个公共类&#xff0c;对于需要悬浮显示的控件均可挂载此类。代码如下&#xff1a; using UnityEngine; using UnityEngine.EventSystems; using Un…

OpenCV 中的光流 (C++/Python)

什么是光流? 光流是一项视频中两个连续帧之间每像素运动估计的任务。基本上,光流任务意味着计算像素的位移矢量作为两个相邻图像之间的对象位移差。光流的主要思想是估计物体由其运动或相机运动引起的位移矢量。 理论基础 假设我们有一个灰度图像——具有像素强度的矩阵。我…