WordPress美化——为鼠标点击添加粒子效果
本文最后更新于 885 天前,其中的信息可能已经有所发展或是发生改变。

刚才逛一个博客的时候,发现鼠标点击和文本框输入都有挺好看的粒子效果,就研究了一下怎么用

鼠标点击效果

经过不断的尝试(删除),发现控制点击时的粒子效果是靠下面的这个脚本

file

然后拷贝代码,参考 https://www.niubai.net/944 给自己的博客添加代码就完成了效果

<canvas style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="/wp-content/themes/mdx/js/fireworks.js"></script>

文本框输入效果

和上面一样,很快定位到脚本的位置

file

同样的操作,拷贝大法!然后...

啥都没有...

然后在源码里看到下面这行,应该是监听input事件,加上就有效果了

<script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE)</script>

同时发现,上面的<canvas>不加也有效果,不过我也不懂JS,不清楚为何

最终就是加上如下代码,实现了粒子效果

<script type="text/javascript" src="/wp-content/themes/mdx/js/fireworks.js"></script>
<script type="text/javascript" src="/wp-content/themes/mdx/js/test.js"></script>
<script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE)</script>

(神奇的是,在后台鼠标点击也有效果Orz)

12/27更新

之前拷贝的鼠标点击代码没有处理窗口的大小变化,导致窗口缩放以后就会出现问题

万幸我在文本框输入特效的js文件里找到了相关代码能处理这个问题

  handleResize() {
  this.renderCanvas.width = this.computerCanvas.width = this.globalWidth = window.innerWidth
  this.renderCanvas.height = this.computerCanvas.height = this.globalHeight = window.innerHeight
  }
  --------------------------------------------------------------
  window.addEventListener('resize', this.handleResize.bind(this))
  // window.addEventListener('mousemove', this.handleMouseMove.bind(this))
  // 还可以为鼠标移动加上粒子特效,还挺炫的,不过太影响观感

还有就是 ctrl + shift + r 可以强制刷新js,因为js等文件会缓存在本地几天,不刷新没效果(一开始还不知道能在浏览器里调试。。然后就新建了好几个js文件来测试。。)

2020/7/27更新

把WordPress更新了一下,效果失效了。。。懒得再搞了。。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇