一直觉得网站多点细节蛮好的，只要不是过于花哨就行。
最近想给 Typecho 加个鼠标特效，又不想那些点击大爆炸效果的，感觉过于花哨，所以想起来了通过简单的代码实现的点击出现文字的一段。

代码

    /*鼠标特效代码*/
    <script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("氤氲", "缱绻", "旖旎", "潋滟", "荼蘼", "踯躅", "陟遐" ,"娉婷", "伶俜", "知命不惧", "日日自新", "谢观");
            var $i = $("<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 - 30,
                "left": x - 10,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#fbb331"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 160,
                "opacity": 50
            },
            1500,
            function() {
                $i.remove();
            });
        });
    });
    </script>

使用方法

  • 代码要在全站实现效果，需要放在全站都有的模板里面，Typecho 的话，选择更换外观-编辑当前外观-footer.php文件进行编辑，注意代码要放在</body>标签的前面
  • 文字可以随意修改，点击显示是按顺序出现的。
  • 颜色、高度、速度等都可以通过修改上述的代码参数实现。
文章目录