站长资源自动社会主义价值观出来后，各行各业都在跟风，程序员也不例外，我们经常可以看到很多博客站右击会出现富强、民主、文明、和谐…等等。
如图：
那么该功能是如何实现的呢，实现的思路很简单，今天站长资源网就来给你剖析一下。
html是不需要写的，因为我们是创建的标签
主要是JS的逻辑如何写
分析：
一、我们需要一个数组元素存储社会主义价值观
var shuzu = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
二、我们每次点击需要顺序出现数组中的值(为什么是顺序，哎这种东西还是别搞乱的好),想用随机就配合random()以及ceil(),floor()来实现
var suoyin = 0;
$("body").contextmenu(function(e) {
var wenzi = $("<span/>").text(shuzu[suoyin]);
suoyin = (suoyin + 1) % shuzu.length;
})
首先定义了索引变量初始为0，然后创建一个span标签并往里面填充数组中的值，再然后就要让索引网上增加一个，但是索引不能超出数组的长度，所以这里取模操作。
三、我们要获取右键点击的坐标位置，在该位置出现文字
var x = e.pageX,
y = e.pageY;
我们获取点击的坐标位置
然后用该坐标设置为元素的坐标
wenzi.css({
"z-index": 999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#81c300"
});
最后追加进body中
$("body").append(wenzi);
四、出现之后进行移除，移除就比较简单了，我们在移除的同时稍微给它加点动画效果
wenzi.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
wenzi.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>
<style>
html,body{
margin: 0;
padding: 0;
width:100%;
height: 100%;
}
</style>
</head>
<body>
<script>
var suoyin = 0;
jQuery(document).ready(function($) {
$("body").contextmenu(function(e) {
e.preventDefault();
var shuzu = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var wenzi = $("<span/>").text(shuzu[suoyin]);
suoyin = (suoyin + 1) % shuzu.length;
var x = e.pageX,
y = e.pageY;
wenzi.css({
"z-index": 999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#81c300"
});
$("body").append(wenzi);
wenzi.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
wenzi.remove();
});
});
});
</script>
</body>
</html>
本文由站长资源网原创首发，转载请注明出处
评论前必须登录！
注册