仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 674|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 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(梦之队)。
乐观 该用户已被删除
5#
发表于 2015-2-8 13:18:48 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
小女巫 该用户已被删除
6#
发表于 2015-2-25 17:48:38 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
灵魂腐蚀 该用户已被删除
7#
发表于 2015-3-8 01:42:00 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
柔情似水 该用户已被删除
8#
发表于 2015-3-15 20:51:08 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
只想知道 该用户已被删除
9#
发表于 2015-3-22 04:15:58 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 06:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表