今天我来介绍一个点赞演示。请注意网页右侧的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方法可以大大简化代码结构,更加高效快捷灵活的实现网页动态功能。