jquery实现动态点赞特效 

<!-- jquery实现动态点赞特效 -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .container{
                border:1px solid black;
                padding:100px;
            }
            .item{
                position:relative;
                width:40px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">
                <span id="s1">赞</span>
            </div>
        </div>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $('#s1').click(function(){
                addFavour(this);
            });
            function addFavour(self){
                var fontsize = 15;
                var top = 0;
                var right = 0;
                var opacity = 1;
                var span = document.createElement('span');
                $(span).text('+1');
                $(self).parent().append(span);
                $(span).css('color', 'green');
                $(span).css('position', 'absolute');
                $(span).css('top', top+'px');
                $(span).css('right', right+'px');
                $(span).css('fontSize', fontsize+'px');
                $(span).css('opacity', opacity);
                //设置定时器，不断更改字体大小，位置，透明度
                var obj = setInterval(function(){
                    fontsize += 5
                    top -= 5;
                    right -= 5;
                    opacity -= 0.3
                    $(span).css('position', 'absolute');
                    $(span).css('top', top+'px');
                    $(span).css('right', right+'px');
                    $(span).css('fontSize', fontsize+'px');
                    $(span).css('opacity', opacity);
                    if(opacity < 0){
                        $(self).next().remove();
                        clearInterval(obj);
                    }
                }, 80);
            }
        </script>
    </body>
</html>

 

posted @ 2018-07-12 21:04  与君同悦  阅读(2351)  评论(0)    收藏  举报