day16-Jquery 点赞功能

一、前言

　　今天我们来学习一下jquery css操作和点赞功能的实现。

二、css的操作

2.1、css的操作

说明：访问匹配元素的样式属性。

1
2
3
$("p").css("color"); //获取样式的值
$("p").css("color"，"red"); //添加或者设置样式的值
$("p").css({ "color": "#ff0011", "background": "blue" });  //将所有段落的字体颜色设为红色并且背景为蓝色。

三、点赞功能实现

3.1、操作的html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            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>
    <script src="jquery-1.12.4.js"></script>
    <script>
       //js代码
    </script>
</body>
</html>

 3.2、点赞功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(".item").click(function(){
    addFavor(this)
});
 
function addFavor(self){
    var fontSzie = 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("fontSzie",fontSzie + "px");
    $(tag).css("top",top + "px");
    $(tag).css("right",right + "px");
    $(tag).css("opacity",opacity);
    $(self).append(tag);
 
    var obj = setInterval(function(){
        fontSzie = fontSzie + 5;
        top = top - 5;
        right = right - 5;
        opacity = opacity - 0.2
 
        $(tag).css("color","green");
        $(tag).css("position","absolute");
        $(tag).css("fontSzie",fontSzie + "px");
        $(tag).css("top",top + "px");
        $(tag).css("right",right + "px");
        $(tag).css("opacity",opacity);
 
        if(opacity < 0){
            clearInterval(obj);
            $(tag).remove();
        }
    },100)
}

 用到的知识点：

1
2
3
4
5
6
$("t1").append();
$("t1").remove();
setInterval();
opacity   透明度
position  位置
fontSize 字体大小，位置
posted @ 2018-05-24 10:07  东郭仔  阅读(117)  评论(0)    收藏  举报