jQuery鼠标特效点击出现文字效果注释详细
  • 分享到微信朋友圈
    X
查看演示

文章内容

分享一个jQuery鼠标特效点击出现文字效果注释详细，文字动画后删除

html代码

<script src="query/1.8.1/jquery.min.js" type="text/javascript"></script>
<div style="height: 1000px;">
</div>
<script type="text/javascript">
        /* 鼠标特效 */
        var a_idx = 0; // 值为0的变量
        $("body").click(function (e) {
            // 数组a，包含n个子元素
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等");
            // 将这个结果a[0]文字添入<span></span>里
            var i = $("<span/>").text(a[a_idx]);
            // 变量值0、1、2、...顺序
            a_idx = (a_idx + 1) % a.length;
            // 点击的坐标位置
            var x = e.pageX, y = e.pageY;
            // <span></span>文字样式
            i.css({ "z-index": "99", "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" });
            // <span></span> 加入body里面
            $("body").append(i);
            // <span></span>动画
            i.animate({ "top": y - 180, "opacity": 0 }, 1500,
            // 动画后删除文字<span></span>
            function () { i.remove(); }
            );
        });
    </script>

在线演示：演示