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参考手册
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
