html点击页面出现随机字,利用jQuery实现点击页面随机显示文字代码

特效描述：利用jQuery实现 点击页面 随机显示 文字代码。利用jQuery实现点击页面随机显示文字代码

代码结构

1. 引入JS

2. HTML代码

$(function () {

var txt = "";

$('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);

});

});