今天我来介绍一个点赞演示。请注意网页右侧的sidebar,当你点击区域时,就会有出现爱心并且逐渐上升,好像点赞一样。这是我偶然间在WordPress大神陌小雨的博客发现的,感觉很有趣,于是就查看源码扒了下来...借鉴一下。刚刚发现,他本人已经把这个小小的功能去掉了,没关系,下面放上代码共赏。
jQuery(document).ready(function($) {
$(".newsItem").click(function(e){//选中区域class = newsItem
    var n=Math.round(Math.random()*100);//随机数
    var $i=$("<b>").text("+"+n+"?");//添加到页面的元素
    var x=e.pageX,y=e.pageY;//鼠标点击的位置
    $i.css({//改变样式
        "z-index":99999,
        "top":y-15,
        "left":x,
        "position":"absolute",
        "color":"red",
	"user-select":"none"
    });
    $("body").append($i);
    $i.animate(
        {"top":y-180,"opacity":0},
        1500,//持续1500毫秒
        function(){$i.remove();}
    );
    e.stopPropagation();//停止播放
});
});
这么严谨的逻辑功能当然需要引用万能的jQuery啦。其中,$i指的是新建的心形图标,$i的样式设置为z轴距离99999,绝对定位,红色不可选中。append()附加,animate()活动,remove()移动,这些都是jQuery的方法,引用jQuery方法可以大大简化代码结构,更加高效快捷灵活的实现网页动态功能。