基于大佬的代码实现看板娘效果(三段代码实现)

本文介绍如何使用刘舟大佬的代码在网页中轻松实现看板娘的互动效果,包括跟随鼠标移动和点击反馈,只需三段代码即可完成。适用于Vue项目或其他HTML页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基于大佬的代码实现看板娘效果(三段代码实现)

这是鄙人的第一篇博客日记,虽然也是用的他人的代码。这里附上原文地址https://www.cnblogs.com/liuzhou1/p/10813828.html,大佬在这里。话不多说放图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这是我随手截出来的三张图,看板娘会随着你的鼠标移动和点击做出不同的反应和目光方向,所以看起来是非常和谐的。实现这个效果是非常简单的,代码附上:
在html页面直接引入


<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>

这两段script引用了刘舟大佬已经写好的js动效,然后看板娘实际上已经实现了,接下来再用JS把它放在左下角或者你想放的位置都可以

<script type="text/javascript">
    L2Dwidget.init({"display": {
        "superSample": 2,
        "width": 200,
        "height": 400,
             "position": "right",
                 "hOffset": 0,
        "vOffset": 0
          }
     });
</script>

这样就已经实现了。因为我是在vue项目中引入的,所以要引入以上的代码话,找到vue项目的index.html页面进行引入就可以了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值