jQuery点击弹出文字特效

最新推荐文章于 2023-03-14 13:40:30 发布

Mr.王征

最新推荐文章于 2023-03-14 13:40:30 发布

阅读量451

点赞数 2

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/wangzhneg123/article/details/87894838

版权

jQuery 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>点击弹出文字特效</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        #content {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
<div id="content">
    <h3>试着点击空白处——查看你的女朋友</h3>
    <span></span>
</div>

<script>
    var a_idx = 0;
    jQuery(document).ready(function ($) {
        $("body").click(function (e) {
            var a = new Array("苏菲·玛索", "奥黛丽·赫本", "莫尼卡·贝鲁奇", "凯瑟琳·泽塔-琼斯", "艾玛·罗伯茨", "伊莎贝尔·阿佳妮", "丽芙·泰勒", "黑寡妇", "如花", "石榴姐", "五姑娘", "单身到老");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#81c300"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function () {
                    $i.remove();
                });
        });
    });
</script>
<pre style="color:red">
                      感：  最近贡献一下我在教学中的小案例  希望能给你一些帮助

                      --王      
</pre>

</body>
</html>

Mr.王征

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery点击弹出文字特效

效果展示：源码展示：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;点击弹出文字特效&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.
复制链接

扫一扫

专栏目录