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出现了我也会去试用它。

只看该作者 · 发表于 2015-1-18 07:02:48

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-1-25 12:40:02

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-2-2 22:08:10

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-2-8 13:18:48

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

只看该作者 · 发表于 2015-2-25 17:48:38

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-8 01:42:00

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-15 20:51:08

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

只看该作者 · 发表于 2015-3-22 04:15:58

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

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

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

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

相关帖子