仓酷云

标题: CSS教程之javascript完成能够拖动的层示例(层拖动，兼容IE/FF) [打印本页]

作者: 山那边是海 时间: 2015-1-16 10:37
标题: CSS教程之javascript完成能够拖动的层示例(层拖动，兼容IE/FF)
现在我们不再使用之前所学的“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
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 莫相离 时间: 2015-1-25 12:40
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 简单生活 时间: 2015-2-2 22:08
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

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

作者: 小女巫 时间: 2015-2-25 17:48
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 灵魂腐蚀 时间: 2015-3-8 01:42
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 柔情似水 时间: 2015-3-15 20:51
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 只想知道 时间: 2015-3-22 04:15
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

欢迎光临仓酷云 (http://ckuyun.com/)