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

  • 内容
  • 相关

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


鼠标点击特效


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>

热度:1367° 评分:8.7 发布时间: 2018年7月15日

本文标签:

版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。

本文链接:鼠标点击页面随机闪现文字特效 - https://www.wuiso.com/post-1064.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    xiaomao 回复

    咋下载

    菲律宾