zoukankan html css js c++ java

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;
            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>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $('.item').click(function () {
            AddFavor(this)

        });
        function AddFavor(slef) {
            var fontSize=15;
            var top =0;
            var right=0;
            var opacity = 1;

            var tag = document.createElement('span');
            //dom对象,转换为jQuery对象
            $(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);

            $(slef).append(tag);
            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top =top - 10;
                right = right- 10;
                opacity =opacity - 0.1;
            //    重新赋值
                $(tag).css('fontSize',fontSize +"px");
                $(tag).css('top',top +"px");
                $(tag).css('right',right +"px");
                $(tag).css('opacity',opacity);
                var v =$(slef);

                if (opacity<0){
                    clearInterval(obj)
                    $(tag).remove();
                }


            },100);

        }
    </script>




</body>
</html>

查看全文

相关阅读:
二叉树中序遍历及后序遍历(下)
完全二叉树和三序遍历算法(先序)（上）
分布式调度——zookeeper
Linux版JDK环境安装
 Redis的事务
 Redis的持久化——RDB与AOF
分布式缓存——Redis
非关系型数据库
 分布式存储——MySQL
分布式系统

原文地址：https://www.cnblogs.com/anhao-world/p/14412592.html

jQuery CSS操作 点赞样式

jQuery CSS操作点赞样式