利用jQuery实现桌面右键创建便签贴纸代码



13 48 17



特效描述:利用jQuery实现 桌面右键 创建便签 贴纸代码,利用jQuery实现桌面右键创建便签贴纸代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/animate.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

<h1>点击鼠标右键-----添加标签</h1>
<!--menu S-->
<div class="menu">
	<ul>
		<li onClick="wll_menu(0);">新建文件夹</li>
		<li onClick="wll_menu(1);">添加mini标签</li>
		<li onClick="wll_menu(2);">清空页面</li>
		<li onClick="wll_menu(3);">刷新</li>
		<li onClick="wll_menu(4);">上传资料</li>
		<li onClick="wll_menu(5);">更换背景</li>
		<li onClick="wll_menu(6);">注销</li>
	</ul>
</div>
<!--menu E-->
<p id="test">显示坐标:</p>
<!-- box S-->
<div class="box"></div>
<!-- box E-->
<script type="text/javascript">
$(function(){
// 页面加载时运行  保存到本地
var wll_mask = localStorage.getItem("wll_mask");
if(wll_mask){
	$(".box").html(wll_mask);
	auto_timer();
}
//屏蔽浏览器的右键属性
document.oncontextmenu = function(){return false;}
//点击鼠标右键  显示右键菜单
$(document).mousedown(function(e){
//获取鼠标点击时的坐标(右键是3  左键是1  鼠标滚轮是2)
var key = e.which;
//判断
if(key == 3){
	var x = e.clientX;
	var y = e.clientY;
	//alert(x+"========="+y);
	$("#test").html("显示坐标:&nbsp;X = "+ x +",Y = "+y);
	$(".menu").show().css({left:x,top:y});
}
});
//点击完成后  隐藏右键  
$(document).click(function(){
	$(".menu").hide();
});
});
//右键菜单中的属性  功能实现
function wll_menu(flag){
	//按照菜单的顺序实现
	//0 新建文件夹
	if(flag == 0){
		alert("该功能正在努力建设中。。。");
	}
	//1 添加mini标签
	if(flag == 1){
		var w = Math.floor(Math.random()*30);
		var wll = new Array("pulse","bounce","tada","swing","wobble",
							"flip","flipInX","bounceIn","bounceInUp","bounceInDown",
							"fadeIn","fadeInUp","fadeInDown","fadeInLeft","fadeInRight",
							"fadeInUpBig","fadeInDownBig","fadeInLeftBig","fadeInRightBig","rotateIn",
							"rotateInUpLeft","rotateInDownLeft","rotateInUpRight","rotateInDownRight","swing",
							"rollIn","bounce","tada","swing","wobble");
		//获取当前鼠标右键的坐标位置
		var left = $(".menu").offset().left;
		var top = $(".menu").offset().top;
		//随机数 1--3
		var random = Math.floor(Math.random()*3)+1;
		//显示mini标签
		$(".box").append("<div class='b_list animated "+wll[w]+"' style='left:"+left+"px;top:"+top+"px;'><img src='img/"+random+".png' alt='便签' width='294' height='310'>"+"<div class='b_content' contenteditable='true'></div>"+"<p class='timer'><span>3</span>秒后自动保存</p>"+"</div>");
		//自动保存
		auto_timer();
	}
	//2 清空页面
	if(flag == 2){
		$(".b_list").removeClass("animated rollIn").addClass("animated bounceOutRight").fadeOut(1000);
		localStorage.removeItem("wll_mask");
	}
	//3 刷新
	//4 上传资料
	//5 更换背景
	//6 注销
}
//3秒之后保存到本地
function auto_timer(){
	var count = 3;
	var timer = setInterval(function(){
		if(count <= 0){
			//保存到本地
			count = 3;
			localStorage.setItem("wll_mask",$(".box").html());
		}
		$(".timer").find("span").text(count);
		count--;
	},1000);
}
</script>
<div style="text-align:center;margin:-30px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 右键菜单 文本框 text文本框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到