jquery实现动态点赞特效

最新推荐文章于 2024-05-27 18:26:47 发布

anmi8562

最新推荐文章于 2024-05-27 18:26:47 发布

阅读量329

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ericbai/p/9301904.html

版权

<!-- 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>

转载于:https://www.cnblogs.com/ericbai/p/9301904.html

anmi8562

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现动态点赞特效

<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <...
复制链接

扫一扫