快捷導(dǎo)航

據(jù)說(shuō)是Google首頁(yè)的網(wǎng)頁(yè)模塊拖動(dòng)代碼

更新時(shí)間：2010年09月19日 20:30:31 作者：

據(jù)說(shuō)是Google首頁(yè)的網(wǎng)頁(yè)模塊拖動(dòng)代碼，Google很早就應(yīng)用了網(wǎng)頁(yè)拖動(dòng)特效，不知大家發(fā)現(xiàn)沒(méi)？本款拖動(dòng)特效可以說(shuō)是完全模仿了Google的拖動(dòng)代碼，比較有代表性，因此也很有參考價(jià)值，奉獻(xiàn)給大家，僅供參考。

<!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> <title>據(jù)說(shuō)是Google首頁(yè)的網(wǎng)頁(yè)模塊拖動(dòng)代碼</title>  <style type="text/css"> .spanDiv{ position:relative; width:5px; height:5px; } .dragDiv,.nodragDiv{ position:relative; filter:alpha(opacity=100); opacity:1; margin-bottom:6px; background-color:#FFFFFF; } </style> </head> <body >  <table id="dragTable" cellpadding="3" style=" border:solid 0px green;width:98%;"> <tr> <td valign="top" style="width:30%"> <div   id="vvxyksv9kd"   class="dragDiv" id="dragDiv1" > <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar1" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title1</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">這里的字比較長(zhǎng)....我來(lái)了....中國(guó)....中國(guó)...外國(guó).，看一下有沒(méi)有溢出></td> </tr> </table> </div> <div   id="vvxyksv9kd"   class="dragDiv" id="dragDiv2"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title2</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content2...</td> </tr> </table> </div> </td> <td valign="top" style="width:50%"> <div   id="vvxyksv9kd"   class="dragDiv" id="dragDiv3"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title3</th> </tr> <tr style="height:230px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content3...</td> </tr> </table> </div> </td> <td valign="top" style="width:20%"> <div   id="vvxyksv9kd"   class="dragDiv" id="dragDiv4"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title4</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content4...</td> </tr> </table> </div> <div   id="vvxyksv9kd"   class="dragDiv" id="dragDiv5"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title5</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content5...</td> </tr> </table> </div> </td> </tr> </table> </body> </html>

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