一直觉得网站多点细节蛮好的,只要不是过于花哨就行。
最近想给 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>标签的前面
  • 文字可以随意修改,点击显示是按顺序出现的。
  • 颜色、高度、速度等都可以通过修改上述的代码参数实现。
文章目录