JS窗口层滑动排序【类似于QQ空间的布局】

最新推荐文章于 2025-12-17 10:19:46 发布

转载最新推荐文章于 2025-12-17 10:19:46 发布 · 1.2k 阅读

文章标签：

#qq #div #function #class #float #.net

常用JS特效代码专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种模仿Google首页布局的拖曳模块效果实现方法。通过HTML、CSS和JavaScript，用户可以自由调整页面中各个模块的位置。适用于个性化网站布局设计。

<!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=utf-8"> <meta name="keywords" content="站长特效,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" /> <title>网页特效仿google首页拖曳模块效果站长特效网</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{margin:0px;padding:0px;font-size:12px;text-align:center;} body > div{text-align:center;margin-right:auto;margin-left:auto;} .content{width:900px;} .content .left{float:left;width:200px;border:1px solid #FF0000;margin:3px;} .content .center{float:left;border:1px solid #FF0000;margin:3px;width:470px;} .content .right{float:right;width:200px;border:1px solid #FF0000;margin:3px;} .mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF;} .mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move;} .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px;} h1{margin:0px;padding:0px;text-align:left;font-size:12px;height:20px;} h1 span{float:left;} h1 font{float:right;cursor:pointer;}</style> <mce:script language="javascript"></mce:script> </head> <body> <a href="http://www.zzjs.net/" mce_href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <div id="bar" style="height:400px;background:#eee;">站长特效网，高质量网页特效代码，打造一流网页特效站！</div> <input type="button" value="移除上面模块" onclick="mov();"><input type="button" value="添加顶部模块" onclick="show();"><input type="button" value="添加DIV" onclick="add_div();"> <div class=content> <div class="left" id="dom0"> <div class="mo" id="m0"><h1><span>站长特效一号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m1"><h1><span>站长特效二号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m2"><h1><span>站长特效三号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m3"><h1><span>站长特效四号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> </div> <div class="center" id="dom1"> <div class="mo" id="m4"><h1><span>站长特效五号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m5"><h1><span>站长特效六号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m6"><h1><span>站长特效七号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m7"><h1><span>站长特效八号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> </div> <div class="right" id="dom2"> <div class="mo" id="m8"><h1><span>站长特效九号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m9"><h1><span>站长特效十号</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m10"><h1><span>站长特效十一</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> <div class="mo" id="m11"><h1><span>站长特效十二</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div> </div> </div> </body> </html>