CSS教程之javascript完成能够拖动的层示例(层拖动，兼容IE/FF)

显示全部楼层 · 发表于 2015-1-16 10:37:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

现在我们不再使用之前所学的“table”定位技术，而是采用Div+CSS的方式实现各种定位。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><styletype="text/css">#maindiv{position:absolute;width:220px;height:150px;border:1pxsolid#999;}</style><scripttype="text/javascript">vara;document.onmouseup=function(){if(!a)return;document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);a="";};document.onmousemove=function(d){if(!a)return;if(!d)d=event;a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";};function$(o,e){a=o;document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);b=e.clientX-parseInt(a.style.left);c=e.clientY-parseInt(a.style.top);}</script></head><body><divid="main"><divstyle="left:100px;top:100px;background:#fc9;"onmousedown="$(this,event)">1</div><divstyle="left:400px;top:100px;background:#9cf;"onmousedown="$(this,event)">2</div><divstyle="left:700px;top:100px;background:#f9c;"onmousedown="$(this,event)">3</div><divstyle="left:100px;top:300px;background:#9fc;"onmousedown="$(this,event)">4</div><divstyle="left:400px;top:300px;background:#c9f;"onmousedown="$(this,event)">5</div><divstyle="left:700px;top:300px;background:#cf9;"onmousedown="$(this,event)">6</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
Dreamweaver只是充当一个文本编辑器的角色，而你所有的工作基本都在代码视图中完成，在这里我推荐adobe最新的dreamweavercs4。当然如果CS5出现了我也会去试用它。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之javascript完成能够拖动的层示例(层拖动，兼容IE/FF)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子