91

2024-03-31 11:29:10

点赞以及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>

91

上图：通过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>

91

上图：当我们点击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>

91

上图：当前top和right与我们设置的相同

91

上图：在调试接口直接修改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>

91

上图：点击标签后，就出现逐渐放大透明的效果了

91

上图：计时器没有清除，所以计时器一直在运行。

<!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>
上一篇：插入排序


下一篇：考试总结 模拟91