91
點贊以及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對象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;
}
</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」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; //設置默認透明度爲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與咱們設置的相同jquery
上圖：在調試接口直接修改top和right的值，能夠看到+1 就向右上方懸浮了。app
<!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>
上圖：點擊標籤後，就出現逐漸放大透明的效果了dom
上圖：計時器沒有清除，因此計時器一直在運行。ide
<!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>
相關文章
- 1. 91.Decode Ways---dp
- 2. Leetcode: 91. Decode Ways
- 3. LeetCode 91. Decode Ways
- 4. 【LeetCode】91. Decode Ways
- 5. 91. Decode Ways
- 6. LeetCode—91. Decode Ways
- 7. 91-SoftVoting Classifier
- 8. 【JavaWeb】91：Cookie和Session
- 9. Java 8 Update 91 (8u91)
- 10. 91.解碼方法
- 更多相關文章...
- • PHP imagecreate - 新建一個基於調色板的圖像 - PHP參考手冊
- • PHP imagecolorallocate - 爲一幅圖像分配顏色 - PHP參考手冊
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
