仿3721首頁模塊拖曳移動效果js代碼[可拖曳層移動層]

更新時間：2008年09月21日 21:49:08 作者：

比較不錯的模仿3721的頁面模塊拖動效果代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿3721首頁模塊拖曳移動效果[拖曳層移動層]呵，做了一些細致的處理</title> <style type="text/css"> html, body {     width:100%;     height:100%;     padding:0px;     margin:0px; } body {     text-align:center;     font-size:14px; } .cell_left, .cell_right {     width:202px; } .cell_center {     width:404px; } .left {     float:left; } .row {     clear:both; } .r_nbsp {     width:20px; } .root {     width:876px;     height:auto;     margin:auto; } .root * { /*此屬性FF的說*/     -moz-user-select:none; } .line {     width:100%px;     height:0px;     overflow:hidden; } .move {     border:#CCCCCC 1px solid;     width:100%;     height:aotu;     margin-top:5px;     margin-bottom:5px;     display:none; } .title {     height:24px;     line-height:24px;     background:#0080C0; } .title_a {     width:auto;     margin-right:80px;     cursor:move;     font-size:12px;     font-weight:bold;     color:#FFFFFF;     text-align:left;     padding-left:10px; } .title_reduce, .title_lock, .title_edit, .title_close {     float:right;     width:20px;     font-size:9px;     color:#CCCCCC; } .title_reduce, .title_lock, .title_edit {     cursor:pointer; } .title_close {     cursor:default; } .content {     height:100px;     border-top:#CCCCCC 1px solid;     background-color:#F7F7F7;     font-size:12px;     line-height:130%; } .CDrag_temp_div {     border:#CCCCCC 1px dashed;     margin-top:5px;     margin-bottom:5px; } a#DEL_CDrag, a#ADD_CDrag {     color:#6699CC;     text-decoration:none; } a#DEL_CDrag:hover, a#ADD_CDrag:hover {     color:#FF0000; } .Dall_screen, .Iall_screen {     position:absolute;     left:0px;     top:0px; } .Dall_screen {     z-index:99;     background-color:#000000;     filter:alpha(opacity=30);     opacity:0.3; } .Iall_screen {     z-index:98;     filter:alpha(opacity=0);     opacity:0; } .Nall_screen {     position:absolute;     z-index:100;     left:300px;     top:100px;     width:300px;     height:auto;     border:#6699CC 1px solid;     background-color:#F0FAFF;     padding:10px 0 10px 0; } .Call_screen {     width:100%;     height:auto;     line-height:30px;     font-size:12px;     padding-bottom:10px; } </style>  </head> <body>  <div>     <a id="DEL_CDrag" href="javascript:void(0);">[清除記錄]</a>     &nbsp;&nbsp;     <a id="ADD_CDrag" href="javascript:void(0);">[添加記錄]</a> </div> <div   id="wppm3vysvbp"   class="move" id="root_row"><div   id="wppm3vysvbp"   class="title"><div   id="wppm3vysvbp"   class="title_close">關閉</div><div   id="wppm3vysvbp"   class="title_edit">編輯</div><div   id="wppm3vysvbp"   class="title_lock">鎖定</div><div   id="wppm3vysvbp"   class="title_reduce">縮小</div><div   id="wppm3vysvbp"   class="title_a">　</div></div><div   id="wppm3vysvbp"   class="content"></div></div> <div   id="wppm3vysvbp"   class="root">     <div   id="wppm3vysvbp"   class="cell_left left" id="m_1">         <div   id="wppm3vysvbp"   class="line">　</div>     </div>          <div   id="wppm3vysvbp"   class="left r_nbsp">　</div>          <div   id="wppm3vysvbp"   class="cell_center left" id="m_2">         <div   id="wppm3vysvbp"   class="line">　</div>     </div>          <div   id="wppm3vysvbp"   class="left r_nbsp">　</div>          <div   id="wppm3vysvbp"   class="cell_right left" id="m_3">         <div   id="wppm3vysvbp"   class="line">　</div>     </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: