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就是这么懒