本站鼠标点击javascript代码分享
一、我们需要一个数组元素存储社会主义价值观
var a = new Array("富强", "文明", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");二、我们每次点击需要顺序出现数组中的值(为什么是顺序，哎这种东西还是别搞乱的好),想用随机就配合random()以及ceil(),floor()来实现
var a_idx = 0;
var $i = $("<span/>").html("<i class='fa fa-smile-o'></i>" + a[a_idx]);
a_idx = (a_idx + 1) % a.length;首先定义了索引变量初始为0，然后创建一个span标签并往里面填充数组中的值，再然后就要让索引网上增加一个，但是索引不能超出数组的长度，所以这里取模操作。
三、我们要获取点击的坐标位置，在该位置出现文字
var x = e.pageX,
y = e.pageY;我们获取点击的坐标位置
然后用该坐标设置为元素的坐标
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#5cb85c"
});最后追加进body中
$("body").append($i);四、出现之后进行移除，移除就比较简单了，我们在移除的同时稍微给它加点动画效果
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});至此我们就完成了改功能的具体实现。
需要该功能的同学，只需要把代码复制到自己的页面中就可以了哦，防止有些同学没看明白，还是贴出完整代码吧！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>本站网页出现社会主义价值观(富强、民主、文明、和谐...)文字特效</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
html,body{
margin: 0;
padding: 0;
width:100%;
height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "文明", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").html("<i class='fa fa-smile-o'></i>" + a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#5cb85c"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
</body>
</html>
- 本文标签： javascript jquery 特效
- 版权声明： 本站原创文章，于2019年07月26日由廉月程发布，转载请注明出处
