站长资源
中国站长网站

右击网页出现社会主义价值观(富强、民主、文明、和谐…)文字特效

自动社会主义价值观出来后,各行各业都在跟风,程序员也不例外,我们经常可以看到很多博客站右击会出现富强、民主、文明、和谐…等等。

如图:

右击网页出现社会主义价值观(富强、民主、文明、和谐…)文字特效

那么该功能是如何实现的呢,实现的思路很简单,今天站长资源网就来给你剖析一下。

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>

本文由站长资源网原创首发,转载请注明出处


在线演示  
×

站长资源极速下载通道: 右击网页出现社会主义价值观(富强、民主、文明、和谐...)文字特效

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 右击网页出现社会主义价值观(富强、民主、文明、和谐…)文字特效

评论 抢沙发

评论前必须登录!