动画对于网页而言有种无形的魅力,好的动画可以增加阅读者的兴致。比如当你不小心点击网页的时候,出现这样逐渐向上隐去的文字的时候,是不是有种眼前一亮的感觉。

鼠标点击动画–向上渐隐文字-爱 • 范儿

我们来说下怎么实现的,只需要下面一段js代码即可实现,添加到</body>的上面。注意依赖jquery,还要引入jquery库。

<script>
    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": 999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});
        $("body").append($i);
        $i.animate({ "top": y - 180,"opacity": 0},1500, function() {$i.remove();})
;});});
</script>