用vue实现，鼠标悬停放大图片，根据鼠标位置倾斜图片网页源码

大家好，今天给大家介绍一款，用vue实现的，鼠标悬停放大图片，并根据鼠标位置倾斜图片前端网页源码（图1）。送给大家哦，获取方式在本文末尾。

图1

鼠标悬停放大图片，鼠标移动图片就会进行相应角度的倾斜，有3D的效果（图2）

图2

源码完整，部分代码预览：

1.  
   Vue.component("photo-card", {
2.  
   template: `<a class="card"
3.  
   :href="https://blog.csdn.net/mazai5080/article/details/link"
4.  
   target="_blank"
5.  
   ref="card"
6.  
   @mousemove="move"
7.  
   @mouseleave="leave"
8.  
   @mouSEO（(Search Engine Optimization)）ver="over">
9.  
   <div class="reflection" ref="refl"></div>
10.  
    <img :src="https://blog.csdn.net/mazai5080/article/details/img"/>
11.  
    </a>`,
12.  
    props: ["img", "link"],
13.  
    mounted() {},
14.  
    data: () => ({
15.  
    debounce: null }),
16.  
     
17.  
    methods: {
18.  
    over() {
19.  
    const refl = this.$refs.refl;
20.  
    refl.style.opacity = 1;
21.  
    },
22.  
    leave() {
23.  
    const card = this.$refs.card;
24.  
    const refl = this.$refs.refl;
25.  
    card.style.transform = `perspective(500px) scale(1)`;
26.  
    refl.style.opacity = 0;
27.  
    },
28.  
     
29.  
    move() {
30.  
    const card = this.$refs.card;
31.  
    const refl = this.$refs.refl;
32.  
     
33.  
    const relX = (event.offsetX 1) / card.offsetWidth;
34.  
    const relY = (event.offsetY 1) / card.offsetHeight;
35.  
    const rotY = `rotateY(${(relX - 0.5) * 60}deg)`;
36.  
    const rotX = `rotateX(${(relY - 0.5) * -60}deg)`;
37.  
    card.style.transform = `perspective(500px) scale(2) ${rotY} ${rotX}`;
38.  
     
39.  
    const lightX = this.scale(relX, 0, 1, 150, -50);
40.  
    const lightY = this.scale(relY, 0, 1, 30, -100);
41.  
    const lightConstrain = Math.min(Math.max(relY, 0.3), 0.7);
42.  
    const lightOpacity = this.scale(lightConstrain, 0.3, 1, 1, 0) * 255;
43.  
    const lightShade = `rgba(${lightOpacity}, ${lightOpacity}, ${lightOpacity}, 1)`;
44.  
    const lightShadeBlack = `rgba(0, 0, 0, 1)`;
45.  
    refl.style.backgroundImage = `radial-gradient(circle at ${lightX}% ${lightY}%, ${lightShade} 20%, ${lightShadeBlack})`;
46.  
    },
47.  
    scale: (val, inMin, inMax, outMin, outMax) =>
48.  
    outMin (val - inMin) * (outMax - outMin) / (inMax - inMin) } });
49.  
     
50.  
     
51.  
     
52.  
    const app = new Vue({
53.  
    el: "#grid" });

本模板编码：10130，需要的朋友，关注下面微信公众号后，搜索10130，即可获取。

这篇好文章是转载于：学新通技术网