jQuery鼠标点击页面随机闪现文字特效

jQuery鼠标点击页面随机闪现文字特效-精品资源网
jQuery鼠标点击页面随机闪现文字特效
此内容为免费资源,请登录后查看
0
免费资源

jQuery鼠标点击页面随机闪现文字特效

jQuery鼠标点击页面随机闪现文字特效,在js里设置好默认文字,鼠标点击网页时随机显示文字向上浮动消失动画。

js代码

<script src=\"js/jquery-1.9.0.min.js\"></script>
<script>
    $(function () {
        var txt = \"<span class=\'txt\'></span>\";
        $(\'body\').append(txt);
        var txted = $(\".txt\");
        txted.css({
            position: \"absolute\",
            color: \"#008ed4\"
        });
        var Animated = function (x) {
            x.stop().animate({
                top: \"-=80px\",
                opacity: \'1\'
            }, 500, function () {
                $(this).animate({
                    opacity: \"0\"
                }, 500);
            });
        };
        $(document).on(\"click\", function (e) {
            var attr = [\"自由\", \"民主\", \"富强\", \"希望\", \"和平\", \"积极\", \"向上\", \"进取\"];
            var mathText = attr[Math.floor(Math.random() * attr.length)];
            //获取鼠标的位置
            var x = e.pageX - 32 + \"px\";
            var y = e.pageY - 18 + \"px\";
            txted.text(mathText);
            txted.css({
                \"left\": x,
                \"top\": y
            });
            Animated(txted);
        });
    });
</script>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容