博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery实现点赞动态效果

Posted on 2018-08-30 22:07  alex_hrg  阅读(699)  评论(0)    收藏  举报

实现动态效果基本上都是用到定时器，修改标签的位置大小颜色属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .zan{
        line-height: 20px;
        width: 20px;
        height: 20px;
        position: relative;
    }
</style>
</head>
<body>
<div style="width: 500px;height: 300px;padding-left: 100px;padding-top: 150px">
<div class="zan">
    <span>赞</span>
</div>
<hr><br>
<div class="zan">
    <span>赞</span>
</div>
<hr><br>
<div class="zan">
    <span>赞</span>
</div>
<hr><br>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
    $('.zan').click(function () {
        var top = 0;
        var left = 0;
        var fontSize = 12;
        var opacity = 1;
        var tag = document.createElement('span');
        $(tag).text('+1');
        $(tag).css('position','absolute');
        $(tag).css('float','left');
        $(tag).css('color','blue');
        $(tag).css('top',top + "px");
        $(tag).css('left',left + "px");
        $(tag).css('font-size',fontSize + "px");
        $(tag).css('opacity',opacity);
        $(this).append(tag);
        var obj = setInterval(function () {
            top = top - 5;
            left = left + 5;
            fontSize = fontSize + 5;
            opacity = opacity - 0.2;
            $(tag).css('top',top + "px");
            $(tag).css('left',left + "px");
            $(tag).css('font-size',fontSize + "px");
            $(tag).css('opacity',opacity);
            if(opacity < 0){
                clearInterval(obj);
                tag.remove();
            }
        },100);
    });
</script>
</body>
</html>