点赞以及jQuery css操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative; <!--设置relative，这样新增的标签可以根据item标签来悬浮-->
}
</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>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this); //将this，也就是点击的item传参到函数
});
function AddFavor(self) { //这里self相当于item
var v = $(self);
console.log(v);
}
</script>
</body>
</html>
上图：通过console.log打印jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
}
</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>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this)
});
function AddFavor(self) {
var tag = document.createElement('span'); //创建span标签，这是dom对象
$(tag).text('+1'); //设置span标签的内容为 +1
$(tag).css('color','green'); // 设置+1为绿色
$(self).append(tag); //将span标签及其内容添加到item标签中。
}
</script>
</body>
</html>
上图：当我们点击item标签时就会新增“+1”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 40px;
}
</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>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this)
});
function AddFavor(self) {
var fontSize = 15; //设置内容大小
var top = 0; //设置悬浮的高度距离
var right = 0; //悬浮右侧的距离
var opacity = 1; //设置默认透明度为1，1表示不透明
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute'); //让+1悬浮，这里要设置position属性为absolute
$(tag).css('fontSize',fontSize + "px"); //调用并应用内容大小参数
$(tag).css('top',top + "px"); //注意但凡涉及到像素的，后面一定要加px
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity); //设置透明度
$(self).append(tag);
}
</script>
</body>
</html>
上图：当前top和right与我们设置的相同
上图：在调试接口直接修改top和right的值，可以看到+1 就向右上方悬浮了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 40px;
}
</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>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this)
});
function AddFavor(self) {
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
$(self).append(tag);
//定义一个计时器，没100毫秒自动执行一次
setInterval(function () {
fontSize = fontSize + 5; //每100毫秒将字体大小产生变化
top = top - 5;
right = right - 5;
opacity = opacity - 0.2;
$(tag).css('fontSize',fontSize + "px"); //将产生变化后的值重新赋值给变量
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
},100);
}
</script>
</body>
</html>
上图：点击标签后，就出现逐渐放大透明的效果了
上图：计时器没有清除，所以计时器一直在运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
width: 40px;
}
</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>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
AddFavor(this)
});
function AddFavor(self) {
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('position','absolute');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj =setInterval(function () { //定义计时器变量名为obj
fontSize = fontSize + 5;
top = top - 5;
right = right - 5;
opacity = opacity - 0.2;
$(tag).css('fontSize',fontSize + "px");
$(tag).css('top',top + "px");
$(tag).css('right',right + "px");
$(tag).css('opacity',opacity);
if(opacity <0){
clearInterval(obj); //当opacity小于0时，清除obj计时器； 因为计时器会一直运行，所以opacity会一直减0.2，所以会小于0。
$(tag).remove(); //计时器虽然清除了，但新增+1这个标签还在，要将其删除。
}
},100);
}
</script>
</body>
</html>