day16-示例：点赞以及jQuery css操作

一、前言

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

二、css的操作

2.1、css的操作

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

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

三、点赞功能实现

3.1、操作的html

<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、点赞功能

$(".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)
}

 用到的知识点：

$("t1").append();
$("t1").remove();
setInterval();
opacity   透明度
position  位置
fontSize 字体大小，位置

 

posted @ 2018-02-01 11:16  帅丶高高  阅读(154)  评论(0)  编辑  收藏  举报