点击页面实现向上滑动文字并消失jQuery实现

最新推荐文章于 2022-09-05 20:30:26 发布

苗雪松

最新推荐文章于 2022-09-05 20:30:26 发布

阅读量1.1k

点赞数

分类专栏：动画效果文章标签： html

本文链接：https://blog.csdn.net/weixin_42930684/article/details/89030391

版权

动画效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
    <head>
    	<meta charset="UTF-8"/>
    </head>
    <body>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function($) {
            $("body").click(function(e) {
                var a = ["天真","富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"];
                var $i = $("<span/>").text(a[a_idx]);
                console.log($i);
                
                a_idx = (a_idx + 1) % a.length;
                //获取x,y位置点击坐标
                var x = e.pageX;
                y = e.pageY;
                
                $i.css({
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "#ff6651"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
            });
        });
        </script>
    </body>
</html>