1. 创建标签 document.createElement()
2.$(tag).css(‘属性‘， 样式) 赋予标签属性样式
3.设置定时器 改变位置 大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #eeeeee;
}
.item{
cursor: pointer;
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="../jquery-2.12.4.js"></script>
<script>
$(‘.item‘).click(function () {
add1Element(this);
function add1Element(self) {
var right = 0;
var top = 0;
var fontSize = 15;
var opacity = 1;
var tag=document.createElement(‘span‘);
tag.innerText = ‘+1‘;
$(tag).css(‘position‘, ‘absolute‘);
$(tag).css(‘color‘, ‘green‘);
$(tag).css(‘right‘, right+‘px‘);
$(tag).css(‘top‘, top+‘px‘);
$(tag).css(‘fontSize‘,fontSize+‘px‘ );
$(tag).css(‘opacity‘, opacity);
$(self).append(tag);
var obj=setInterval(function (){
right = right-5;
top = top-5;
fontSize = fontSize+5;
opacity = opacity-0.1;
$(tag).css(‘right‘, right+‘px‘);
$(tag).css(‘top‘, top+‘px‘);
$(tag).css(‘fontSize‘,fontSize+‘px‘ );
$(tag).css(‘opacity‘, opacity);
if(opacity<0){
clearInterval(obj)
}
}, 80)
}
})
</script>
</body>
</html>
等属性
点赞功能实现 $(tag).css('属性', '样式')
原文地址：https://www.cnblogs.com/my-love-is-python/p/9310380.html
时间： 2024-10-28 23:22:31