1. 程式人生 > 實用技巧 >js之好看的滑鼠點選-游標特效

js之好看的滑鼠點選-游標特效

1.游標特效

<script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js"></script>      <!--游標之泡泡-->
<script src="https://blog-static.cnblogs.com/files/axqa/emojiCursor.js"></script>       <!--笑臉-->
<script src="https://blog-static.cnblogs.com/files/axqa/batsCursor.js"></script>        <!--蝙蝠-->
<script src="https://blog-static.cnblogs.com/files/axqa/fairyDustCursor.js"></script>   <!--仙女棒-->
<script src="https://blog-static.cnblogs.com/files/axqa/ghostCursor.js"></script>       <!--滑鼠-->
<script src="https://blog-static.cnblogs.com/files/axqa/snowflakeCursor.js"></script>   <!--雪花-->

Github 網址:https://github.com/tholman/cursor-effects

2.點選特效

<script src="https://blog-static.cnblogs.com/files/axqa/cursor-effects.js"></script> //點選後出現煙花效果

3.點選特效

<script type="text/javascript">
/* 滑鼠特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a 
= new Array("❤C❤","❤ヾ(^∀^)ノ ❤","❤python❤","❤٩(๑❛ᴗ❛๑)۶ ❤","❤java❤","❤( • ̀ω•́ )✧ ❤","❤C#❤","❤┗(•ω•;)┛❤","❤C++❤","❤(^_-)❤","❤SQL❤","❤(^_−)☆❤","❤javascrpit❤","❤ヾ(@^▽^@)ノ❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x
= e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 2500, function() { $i.remove(); }); }); }); </script>

註釋:最好轉存到自己的檔案下,以防丟失。