VUE.JS 实现图片随鼠标变换的动画效果

先来看演示效果

首先我们设置一个这样的图片样式

<template><div class="login100-pic"><img src="../static/images/img-01.png" alt="IMG"/></div>
</template><style>
.login100-pic {width: 316px;
}.login100-pic img {max-width: 100%;
}
</style>

原本我是设置了一个监听鼠标事件

  mounted() {document.querySelector(".login100-pic").addEventListener(`mousemove`, this.mouseMove);},

当鼠标移入这个div时就执行 mouseMove 函数

<script>
export default {data() {return {},methods: {mouseMove: function (e) {//鼠标移入事件},},mounted() {},
};
</script>

但实际实现后却发现了一个问题，这个问题先暂时不表，先看看 mouseMove() 怎么实现

let x = e.offsetX; //相对元素的X偏移量
let y = e.offsetY; //相对元素的Y偏移量
let x1 = img.offsetWidth;//元素的宽度
let y1 = img.offsetHeight;//元素的高度

获得鼠标在元素内的坐标和元素的高度和宽度，因为我们要将图片变换，所以要用到CSS中的 transform ，默认是以元素中心为原点，所以我们要算出中心点的坐标和鼠标位置的偏移量后除以20防止图片变形过度，再将css设置上去。

mouseMove: function (e) {let x = e.offsetX; //相对元素的X偏移量let y = e.offsetY; //相对元素的Y偏移量let img = document.querySelector(".login100-pic");let x1 = img.offsetWidth;//元素的宽度let y1 = img.offsetHeight;//元素的高度document.querySelector(".login100-pic").style.cssText += "will-change: transform";document.querySelector(".login100-pic").style.cssText += `transform:perspective(300px) rotateX(${(x1 / 2 - x) / 20}deg) rotateY(${(y1 / 2 - y) / 20}deg) scale3d(1.1,1.1,1.1)`;
}

鼠标移出后图片也要复原，所以设置一个移出时调用的函数

mouseLeave: function () {document.querySelector(".login100-pic").style.transform ="perspective(300px) rotateX(0deg) rotateY(0deg)";
}

这个时候我们回到之前的问题，使用这种方法会出现动画卡顿的情况，因为监听事件是循环调用的，在循环中你移动鼠标就会出现卡顿的情况，所以我们之间用 @mousemove="mouseMove" 来代替 mounted() 这样就可以解决卡顿问题了。

<template><div class="login100-pic" @mousemove="mouseMove" @mouseleave="mouseLeave"><img src="../static/images/img-01.png" alt="IMG"/></div>
</template>

VUE.JS 实现图片随鼠标变换的动画效果相关推荐

html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
HTML+CSS+JS实现图片跟踪鼠标
HTML+CSS+JS实现图片跟踪鼠标啥也不说上效果然然我的然然prpr 好吧没效果复制康康 //注释html 不然会出错 ...
vue 图片裁剪工具_使用Vue.js的图片裁剪工具，包括预览
vue 图片裁剪工具 Vue作物 (vue-crop) Images Crop tool with Vue.js including preview. 使用Vue.js的图片裁剪工具,包括预览. Vi ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
6种css3鼠标滑过动画效果
<html><head><meta charset="utf-8" /><title>6种css3鼠标滑过动画效果</titl ...
CSS 实现图片旋转和水波纹动画效果
CSS 实现图片旋转和水波纹动画效果背景通过 CSS 动画实现图片旋转和水波纹动画效果,并做成 Vue 组件,方便以后复用. 代码 <template><view class=& ...
html 鼠标图标做成动画效果,怎么实现鼠标经过图标动画效果
学习前端的小伙伴们你知道鼠标经过图标动画效果如何实现吗?不知道的话跟着小编一起来学习标经过图标动画效果怎么实现把. 今天就为大家分享一组时尚而简单的鼠标经过图标动画效果. 构建HTML基本结构在本示 ...

VUE.JS 实现图片随鼠标变换的动画效果

VUE.JS 实现图片随鼠标变换的动画效果相关推荐

最新文章

热门文章