	资讯中心	网站运营	平面设计	网站设计	网络技术	网络编程	网页特效	下载中心

您现在的位置：文章频道 → 网页特效 → 文本特效 → 文章内容

仿新浪博客上移下移程序(jquery)

作者：佚名文章来源：本站整理发布时间：2010-1-6 0:01:41 []

减小字体增大字体

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<style type="text/css">
* {
font-family:"宋体";
line-height:180%;
font-size:12px;
}
#pannelList {
position:relative;
height:266px;
overflow-y:scroll;
}
#pannelList{
margin:0 0 0 10px;
padding:5px 0 0;
}
#pannelList .nodata {
color:#444444;
padding:5px 0 0;
text-align:center;
}
#pannelList .items {
position:relative;
border-bottom:1px dashed #C6C6C6;
height:38px;
list-style-type:none;
margin:0;
padding:8px 0 5px 8px;
}
#pannelList .currentItem {
background:#F2F6F9 none repeat scroll 0 0;
}
#pannelList .content {
background:transparent url(http://simg.sinajs.cn/blog/v5images/listdot.gif) no-repeat scroll 12px 9px;
padding-left:20px;
}
#pannelList .manage {
display:block;
float:right;
padding:0 10px 0 0;
}
#pannelList .manage a {
color:#427800;
margin-left:5px;
text-decoration:bno;
}
.split {
margin-left:15px;
}
#pannelList a.arrow {
cursor:pointer;
font-size:13px;
height:12px;
margin:0;
padding:0 3px;
text-decoration:none;
}
#pannelList .only .up, #pannelList .only .up_current, #pannelList .first .up, #pannelList .first .up_current {
background:transparent url(http://simg.sinajs.cn/blog/v5images/icon/arrow.gif) no-repeat scroll 0 0;
}
#pannelList .only .down, #pannelList .only .down_current, #pannelList .last .down, #pannelList .last .down_current {
background:transparent url(http://simg.sinajs.cn/blog/v5images/icon/arrow.gif) no-repeat scroll 0 -18px;
}
#pannelList .last .up, #pannelList .normal .up {
background:transparent url(http://simg.sinajs.cn/blog/v5images/icon/arrow.gif) no-repeat scroll 0 -35px;
}
#pannelList .first .down, #pannelList .normal .down {
background:transparent url(http://simg.sinajs.cn/blog/v5images/icon/arrow.gif) no-repeat scroll 0 -52px;
}
#pannelList .last .up_current, #pannelList .normal .up_current {
background:transparent url(http://simg.sinajs.cn/blog/v5images/icon/arrow.gif) no-repeat scroll 0 -69px;
}
#pannelList .first .down_current, #pannelList .normal .down_current {
background:transparent url(http://simg.sinajs.cn/blog/v5images/icon/arrow.gif) no-repeat scroll 0 -86px;
}
.itemEditForm {
position:absolute;
z-index:400;
}
.hide {
position:absolute;
top:-1000px;
z-index:300;
}
.hidden {
display:block;
visibility:hidden;
}
.editContent{ position:absolute; left:10px; top:10px;height:35px; width:98%; background-color:#fff;}
.editContent .eName, .editContent .eLink,.editContent .eDesc{ float:left;border:1px solid #BBBBBB; margin-right:5px;padding:2px; height:17px; color:#333;}
.addlist{ padding:10px 10px 10px 20px; zoom:1; overflow:hidden;}
.addlist .adName,.addlist .adLink,.addlist .adDesc,.newTitle{ float:left; border:1px solid #ccc; margin-right:5px; line-height:120%; padding:2px; height:17px; color:#333;}
.editContent .eSubmit,.editContent .eReset,.addlist .adSubmit,.addlist .adReset,.btn2{ float:left;border:0px; border:1px solid #BBBBBB; background-color:#E3E3E3; margin-right:5px; padding:2px; height:23px; line-height:120%;}
.title{
 padding:6px;
 font-weight:400;
 padding-left:20px;
 zoom:1;
 overflow:hidden;
/* position:absolute;
 left:10px;
 top:10px;
 z-index:400;*/
}
</style>
<script type="text/javascript">
$(function(){
 var i=0;
 //创建一条记录
 $(".adSubmit").click(function(){
  i++;
  var _adname = $(".adName").val();
  var _adlink = $(".adLink").val();
  var _adDesc = $(".adDesc").val();
  var _NewStr='';
  _NewStr='<div class="items">' +
      '<div class="manage">' +
       '<a href="#" class="edit">编辑</a><a href="#" class="del">删除</a><span class="split"> </span>' +
       '<a href="#" class="arrow up">  </a><a href="#" class="arrow down">  </a>'+
      '</div>'+
      '<div class="content" id=_listItem'+i+'><a href=http://'+ _adlink +'>'+_adname+'</a>' +
       '<div class="description">'+_adDesc+'</div>' +
      '</div>' +
     '</div>';
  $(".list").append(_NewStr);
  resert();
 });
 
 //设置上下移动的背景的class
 function resert(){
  if($("div.list").find("div.items").size()==1)
  {
   $("div.items").find("div.manage").parent().removeClass("normal").removeClass("last").removeClass("first").addClass("only");
  }
  if($("div.list").find("div.items").size()==2)
  {
   $("div.items:eq(0)").removeClass("only").removeClass("normal").removeClass("last").addClass("first");
   $("div.items:eq(1)").removeClass("only").removeClass("normal").removeClass("first").addClass("last");
  }
  if($("div.list").find("div.items").size()>=3)
  { 
   $("div.items:gt(0)").removeClass("only").removeClass("first").removeClass("last").addClass("normal");
   $("div.items:first").removeClass("only").removeClass("normal").removeClass("last").addClass("first");
   $("div.items:last").removeClass("only").removeClass("normal").removeClass("first").addClass("last");
  }
 }
 //向下移动
 $("a.down").live("click",function(){
  var _row =$(this).parents("#pannelList div.items");
  if(_row.next().html())
  {
   _row.next().after(_row);
  }
  resert();
 });
 //向上移动
 $("a.up").live("click",function(){
  var _row =$(this).parents("#pannelList div.items");
  if(_row.prev().html())
  {
   _row.prev().before(_row);   
  }
  resert();
 });
 //删除记录
 $("a.del").live("click",function(){
  $(this).parent().parent().remove();
  resert();
 });
 //编辑记录
 $("a.edit").live("click",function(){
  var editContent='<div class="editContent"><input type="text" class="eName" value="" maxlength="72"/><input type="text" class="eLink" value="" maxlength="256"/><input type="text" class="eDesc" value="" maxlength="1000"/><input type="button" class="eSubmit" value="确定"/><input type="button" class="eReset" value="取消"/></div>'
  $(this).parents("div.items").append(editContent);
 });
 //编辑记录中的取消
 $(".eReset").live("click",function(){
  $(this).parents("div.editContent").css("display","none");
 });
 //编辑记录中的确定
 $(".eSubmit").live("click",function(){
  $(this).parents("div.editContent").css("display","none");
 });
 $(".adName").click(function(){if($(this).val()=="请输入名称")$(this).val("");});
 $(".adLink").click(function(){if($(this).val()=="请输入链接地址")$(this).val("");});
 $(".adDesc").click(function(){if($(this).val()=="请输入描述")$(this).val("");});
 $(".adName").blur(function(){if($(this).val()=="") $(this).val("请输入名称")});
 $(".adLink").blur(function(){if($(this).val()=="") {$(this).val("请输入链接地址")}});
 $(".adDesc").blur(function(){if($(this).val()=="") $(this).val("请输入描述")});
 
$("#_SaveTitle").click(function(){
  var txts=$("#_ModlTitle").val();
  $("#_titleEdit").css("display","none");
  $("#_titleHtml").css("display","block");
  $("#_Mask").css("display","none");
  $("#_titleContent").text(txts);
 });
 
 $("#_titleContenta").click(function(){
  $("#_titleEdit").css("display","block"); 
  $("#_titleHtml").css("display","none");
  $("#_Mask").css("display","block");
  return false;
 });
 
 $("#_CancelItem").click(function(){
  $("#_titleEdit").css("display","none"); 
  $("#_titleHtml").css("display","block");
  $("#_Mask").css("display","none");
  
  return false;
 });    
 
});
</script>
<div style=" position:relative;">
  <div id="_titleEdit" class="title">
    <input id="_ModlTitle" type="text" class="newTitle Empty" value="请输入标题"/>
    <input id="_SaveTitle" type="button" class="btn2" value="确定" />
    <input id="_CancelItem" type="button" class="btn2" value="取消"/>
  </div>
  <div id="_titleHtml" class="title" style="display:none;"><span id="_titleContent"></span><a href="#" id="_titleContenta">编辑</a></div>
<div class="addlist"><input type="text" class="adName" value="请输入名称" maxlength="72"/><input type="text" class="adLink" value="请输入链接地址" maxlength="256"/><input type="text" class="adDesc" value="请输入描述" maxlength="1000"/><input type="button" class="adSubmit" value="确定"/><input type="button" class="adReset" value="取消"/></div>
<div class="list" id="pannelList">
</div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

点击“运行代码”后，再刷新一次就可以了

上一篇：文章：经典的玛丽医生
下一篇：文章：拖拽翻页(ThrowPage)详解

文章评论

（评论内容只代表网友观点，与本站立场无关！）

您现在的位置：文章频道 → 网页特效 → 文本特效 → 文章内容

文章评论

最近更新

推荐文章

浏览排行