jQuery实现单击页面产生随机字符效果

众所周知,凡是前端页面基本离不开JS,而

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

所以我们可以利用jQuery实现一些很棒的动画效果,如点击页面产生随机字符串,哈哈:

话不多说,上代码,这就是个HTML页面,但是如果离线使用的话需要一个jquery.min.js的文件,官网下载即可:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>点击页面出现随机文字-jq22.com</title>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<style>

body{height:100%;width:100%;position:relative}

footer{width:100%;text-align:center;position:absolute;bottom:0}</style>

</head>

<body>

<center><h1>鼠标点击页面试一试</h1></center>

本特效比较常见适用于博客等站点,可自定义修改<br>

其中a数组,修改增加可以改变文字,也可以加入表情!如:^_^<br>

其中b数组,修改增加可以改变颜色<br>

其中c数组,则修改文字大小<br>

<script>

$(function() {

var a_idx = 0,

b_idx = 0;

c_idx = 0;

jQuery(document).ready(function($) {

$("body").click(function(e) {

var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"),

b = new Array("#09ebfc", "#ff6651", "#ffb351", "#51ff65", "#5197ff", "#a551ff", "#ff51f7", "#ff518e", "#ff5163", "#efff51"),

c = new Array("12", "14", "16", "18", "20", "22", "24", "26", "28", "30");

var $i = $("<span/>").text(a[a_idx]);

a_idx = (a_idx + 1) % a.length;

b_idx = (b_idx + 1) % b.length;

c_idx = (c_idx + 1) % c.length;

var x = e.pageX,

y = e.pageY;

$i.css({

"z-index": 999,

"top": y - 20,

"left": x,

"position": "absolute",

"font-weight": "bold",

"font-size": c[c_idx] + "px",

"color": b[b_idx]

});

$("body").append($i);

$i.animate({

"top": y - 180,

"opacity": 0

}, 1500, function() {

$i.remove();

});

});

});

var _hmt = _hmt || [];

})

</script>

</body>

</html>

代码简洁明了,一看就懂哈哈,

其中a数组,修改增加可以改变文字,也可以加入表情!如:^_^ 其中b数组,修改增加可以改变颜色 其中c数组,则修改文字大小,OK就是这么懒

原文发布于微信公众号 - 浩Coding(gh_c4a2e63d2ca7)

原文发表时间:2018-07-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券