鼠标点击页面随机闪现文字特效
鼠标点击页面随机闪现文字特效
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>