<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点赞功能的实现</title>
<style>
.container{
padding: 50px;
height: 200px;
}
.praise{
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<span class="praise">赞</span>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.praise').click(function () {
addPraise(this);
});
function addPraise(self) {
var fontsize = 15;
var left = 15;
var bottom = 0;
// left、bottom都是指标签内容到左边框和下边框之间的像素距离
var opacity = 1;
var s = document.createElement('span');
$(s).text('+1');
$(s).css('position','relative');
// 相对定位,相对于原本位置的定位
$(s).css('color','red');
$(s).css('fontSize',fontsize+'px');
$(s).css('left',left+'px');
$(s).css('bottom',bottom+'px');
$(s).css('opacity',opacity);
$('.container').append(s);
var val = setInterval(function () {
fontsize += 3;
left += 2;
bottom += 5;
opacity -= 0.1;
$(s).css('fontSize',fontsize+'px');
$(s).css('left',left+'px');
$(s).css('bottom',bottom+'px');
$(s).css('opacity',opacity);
if (opacity<0){
clearInterval(val);
$('.praise').siblings().remove();
}
},40)
}
</script>
</body>
</html>
点赞jquery代码 js点赞功能
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的css - 点赞爱心动效按钮
用css实现一个丝滑Q弹的爱心点赞按钮动效。
动效设计 css 按钮 爱心按钮 ux/ui