您的位置：首页 > Web前端 > JQuery

js+jquery实现html5的后台缓存书签效果

2015-02-25 17:35 465 查看 
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:url("imges/bg2.jpg")}
.Menu{
width:200px;height:252px;background:#CDFEC0;
position:absolute;left:500px;top:100px;
z-index:33;box-shadow:0px 0px 14px #000;
border:2px solid #DDD}
.Menu ul li {list-style-type:none;COLOR:#445605;
line-height:35px;text-indext:25px;font-family:"微软雅黑";
border-bottom:1px solid #ddd;
text-align:center;
}
.Menu ul li:hover{
background:#ABDE6D;color:#6D2EC5;cursor:hand;
}
#desk_list{width:100%;height:700px;position:relative;}
#desk_list .desk{width:274px;height:261px;
/*border:1px solid #000*/;position:absolute;
cursor: move;}
#desk_list .desk .desk_con{
text-indent:2em;
width: 147px;
height: 115px;
background: none repeat scroll 0% 0% #FFF;
margin: 90px auto;
box-shadow:0px 0px 2px rgba(0,0,0,0.5);
cursor:move}
#desk_list .desk p {
display:block;
position:absolute;
bottom:30px;
text-indent:0em;/*border:1px solid #000;*/
display:block;
width: 147px;
height: 25px;
text-align:center;
font-size:12px;
}
#desk_list .desk p span{
color:red;
padding:0px 5px;
font-size:14px;
font-family:"Arial";
}
</style>
</HEAD>

<BODY>
<div class="Menu">
<ul>
<li style="cursor:hand"><a>新建文件夹</a></li>
<li class="hover" style="cursor:hand"><a>添加便签</a></li>
<li style="cursor:hand"><a>清除便签</a></li>
<li style="cursor:hand"><a>刷新</a></li>
<li style="cursor:hand"><a>上传资料</a></li>
<li style="cursor:hand"><a>更换背景</a></li>
<li style="cursor:hand"><a>注销</a></li>
</ul>
</div>
<div id= "desk_list">
<!--<div class="desk" style="background:url(imges/Note.png);
top:20px;left:50px;" >
<div class="desk_con" contenteditable='true'>

<div>
<p><span>3</span>秒后保存</p>
</div>
-->
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

document.oncontextmenu=function(){return false;}
//当按下鼠标右键时，把菜单拉出来

$(document).mousedown(function(e){
var key = e.which;//当1左键，2 中间滑轮 3右键
var x = e.clientX;
var y = e.clientY;
if(key==3){
$(".Menu").css({left:x,top:y}).show();
}
});
$(document).click(function(){
$(".Menu").hide();// alert("输入的数据不符合");
});
//单击便签，加载
var desk_index = -1;
$(".Menu ul li").click(function(){
var _index = $(this).index();
alert(_index);
if(_index==1){
if(localStorage.getItem("deskindex")){
desk_index=Math.floor(localStorage.getItem("deskindex")) ;
alert("得到"+desk_index);
}
var l = $(".Menu").offset().left;
var t = $(".Menu").offset().top;
$("#desk_list").append(
"<div class='desk' style=' width:100px height:100px ; border:2px solid #000 ;background:url(imges/Note"+sjNum()+".png);top:"+t+"px;left:"+l+"px;' ><div class='desk_con'  onmousedown = init(this) contenteditable='true'> <div><p><span>3</span>秒后保存</p></div>");
desk_index++;
localStorage.setItem("deskindex",desk_index);
alert("创建"+desk_index);
autoSave(desk_index);
}else if(_index==2){
//清空便签
if (localStorage.getItem("deskArry")){
localStorage.clear("deskArry");//清空列表标签
localStorage.clear("deskindex");
localStorage.clear();
desk_index=-1;
$("#desk_list").find(".desk").remove();
}
}
});
function sjNum(){
return Math.floor((Math.random()*100*33)%4+1);
}
//利用Html5数据存储，来完成自动保存效果
function autoSave( msindex){
var count = 4;
var  clearTime = null;
clearTime=setInterval(function(){
count--;
if(count<=0){
localStorage.setItem("deskArry",$("#desk_list").html());
clearInterval(clearTime);//清除定时器
}
$(".desk").eq(msindex).find("p span").text(count);
//alert(count);
},1000);alert("这是"+msindex);
}
$(function(){
var _deskArry = localStorage ("deskArry");
if(_deskArry) {
$("#desk_list").append(_deskArry);
}
});
/*var left = 0 , top = 0 ,xleft = 0 ,ytop = 0;
var isOver = false;
var zindex = 3 ;
function init(titleDom) {
//alert("tu");
var thisDom = titleDom;//获取当前的title
var parentDom = thisDom.parentNode;//获取title的对应的div
titleDom.onmousedown = function(event){
var e = event || window.event;//为了兼容火狐
xleft = e.clientX;
ytop = e.clientY;
left = parseInt(parentDom.offsetLeft);//浏览器左边的位置
top =e.clientY//浏览器上边的位置

isOver = true;
zindex++;
parentDom.style.zindex = zindex;
document.onmousemove = function(event){
if(isOver){
var e = event || window.event;//为了兼容ie火狐
var newLeft = left + e.clientX - xleft ;//新的左边距
var newTop = e.clientY ;
//alert(" left:"+newLeft+" top:"+newTop );
parentDom.style.left = newLeft + "px";
parentDom.style.top = newTop + "px";
}
};
document.onmouseup = function(event){
if (isOver)
{
isOver = false;
}
};
};

};*/
</script>
</script>
</BODY>
</HTML>
</span></strong>





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航