(js)点赞效果

所有动画基本都是定时器setInterval()实现的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div{
            height: 200px;
            width: 100%;
            border: 1px solid rebeccapurple;
        }
        .zan{
            width: 20px;
            height: 20px;
            border: 1px solid red;
            cursor: pointer;
            position: relative;
        }
        .sp{
            display: inline-block;
            position: absolute;
        }
    </style>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<div class="div">
    <div class="zan">赞</div>
</div><div class="div">
    <div class="zan">赞</div>
</div>
<div class="div">
    <div class="zan">赞</div>
</div>
<div class="div">
    <div class="zan">赞</div>
</div>
<script>
    $(".zan").click(function(){
        widt=20;              //设置span标签的宽度
        heigh=20;             //设置span标签的高度
        lef=20;               //设置span标签离赞的左侧距离
        to=20;                //设置span标签离赞的上部的距离
        fontsiz=20;           //设置span标签的字体大小
        opacit=0.5;           //设置span标签的透明度

        var span=document.createElement("span");         //创建span标签
        $(this).append(span);                            //将span标签添加到赞标签的下面，也就是以赞标签为父标签
        span.innerHTML="+1";
        span.style.color="red";
        span.setAttribute("class","sp");
        span.style.width=widt+'px';
        span.style.height=heigh+'px';
        span.style.left=lef+'px';
        span.style.top=to+'px';
        span.style.fontSize=fontsiz+'px';
        span.style.opacity=opacit;

        var int=setInterval(showzan,500);    //设置定时器，每隔500毫秒执行一次showzan()函数
        function showzan(){
            widt+=1;
            heigh+=1;
            lef+=1;
            to+=1;
            fontsiz+=1;
            opacit-=0.1;
            span.innerHTML="+1";
            span.style.color="red";
            span.style.width=widt+'px';
            span.style.height=heigh+'px';
            span.style.left=lef+'px';
            span.style.top=to+'px';
            span.style.fontSize=fontsiz+'px';
            span.style.opacity=opacit;
            if(opacit<0){                      //当透明度小于0后，清除定时器，移除span标签
                clearInterval(int);
                $("span").remove();
            }
        }

    })
</script>
</body>
</html>
猜你喜欢
