随鼠标移动的音符特效

《初音未来:梦幻歌姬》手游停服挺久了,曾经玩过几次。因为有PS4版的(以及后来的NS版),所以非常不喜欢手游过度专注于“刷刷刷”这点。我只想要听她唱歌看她跳舞而已。
非常喜欢手游官网界面上的鼠标特效,所以一直想学习,却又一直偷懒。这次终于把特效偷出来了。然而,真正学习怎么实现,恐怕不知道哪天了。

第一步,假设你需要在index.html中加入这个鼠标特效,在<body>中加入两行后,这个文件的内容是:

1
2
3
4
5
<!DOCTYPE html>
<body>
<script id="mymouse" src="/js/pc_mouse.js"></script>
<script src="/js/jquery-1.11.3.min.js"></script>
</body>

如果JQuery的版本或者路径不同,改这里。

第二步,下载pc_mouse.js

第三步,下载这八个图片:

  • subball1.png
  • subball2.png
  • subball3.png
  • subball4.png
  • subball5.png
  • subball6.png
  • subball7.png
  • subball8.png

第四步,下载一个JQuery,最低需求1.11.3

这几个文件的组织形式是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- <网站根目录>/
- images/
subball1.png
subball2.png
subball3.png
subball4.png
subball5.png
subball6.png
subball7.png
subball8.png
- js/
pc_mouse.js //如果图片的位置不同,要改这个文件,搜`.png`改两处URL。
jquery-1.11.3.min.js //可以是更高版本
index.html

一般来说,用浏览器打开index.html就能看到效果了。