vue鼠标滑动页面变色

最新推荐文章于 2024-06-25 21:21:36 发布

奇奇XL

最新推荐文章于 2024-06-25 21:21:36 发布

阅读量303

点赞数

文章标签： vue.js 前端 javascript css html css3

本文链接：https://blog.csdn.net/qq_55299191/article/details/131563265

版权

这篇文章展示了一个使用Vue.js编写的示例代码，当鼠标在页面上移动时，会改变<h3>元素的背景颜色，创建了一个简单的过渡动画效果。通过监听mousemove事件和HSL色彩系统，动态更新元素的背景色，提供了一种互动的用户体验。

摘要由CSDN通过智能技术生成

效果图太晃眼了放封面了

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>过渡动画</title>
</head>
<style>
    .movearea{
        color: white;
        height: 200px;
        padding: 1rem;
        transition: 0.2s background-color ease;
    }
</style>
<body>
    <div id="root">
            <h3 @mousemove="xChange" :style="{background:`hsl(${x},80%,50%)`}" class="movearea">左右滑动鼠标</h3>
            <p>x:{{x}}</p>
    </div>
    
</body>
<script>
    const app = Vue.createApp({
        setup(){
            const {ref} = Vue;
            let x = ref(0);//{value:0}
            const xChange = (e) =>{
                x.value=e.clientX
            }
            return{
                x,
                xChange
            }
        }

    });
    const vm = app.mount("#root");

</script>
</html>