點贊以及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>