　　在网上，我们经常可以看到一些非常实用的拖拽效果，特别是应用于网上购物时，访问者直接就可以把选中的物品拖拽到购物箱或者购物车里，非常方便、有趣。不过大多数人不知道，其实用Dreamweaver中的Behaviors也可以做出同样的效果来。如果你有兴趣，就和我一起来制作一个具有拖拽效果的的购物箱吧！

　　在做拖拽效果的网页之前，首先我们要准备一些图片。比如用作购物箱或购物车的一张大图片，外加几张代表物品的小图片。我在这儿准备了一个购物袋，还有几样物品，它们分别是：手机、游戏手柄和汽车(哇！汽车也可以拖进购物袋中啊！)。

　　准备好了图片，就可以开始我们的工作了。打开Dreamweaver，新建一个页面，在对象面板中选择图层工具，然后用鼠标在页面上拖出一个图层来(或者选择“Insert/Layer”，插入一个新层)。然后，把鼠标放进层中，再选择“对象/插入图像工具”，在此图层中插入刚才准备好的一个图片。

　　重复上面的动作，再接着插入3个图层，然后在此3个图层中分别插入你准备好的另外几张图片。完成后效果如图1。

　　用Dreamweaver图层实现拖拽效果（图一）

　　图1

　　好了，重要的一步来了。点击“窗口/动作”，会弹出“动作(Behaviors)”对话框来，如图2。点击对话框上方的“+”号后，会再弹出一个菜单，选择此菜单中的“Drag Layer”，接着再弹出的，就是“Drag Layer”对话框了，如图3。

　　用Dreamweaver图层实现拖拽效果（图二）

　　图2

　　在此对话框中可以分别设置几个图层的属性。我们把插入购物袋图像的那个图层设置为“不可移动层(Unconstrained)”，其余的几个图层设置为“可移动层(Constrained)”。在此对话框上还有一个“Advanced”选项，点击它，在此面板上勾选“When Drag”选项，然后再把“Ring layer to front，then”选项设定为“Restored z-index”就可以了。

　　用Dreamweaver图层实现拖拽效果（图三）

　　图3

　　重复上述步骤，分别设置好其他几个图层的属性，设置好的“Behaviors”对话框的中间文本框中多出了4个“onLoad”标记。

　　好了，设置完这些，我们的工作也完成了，别忘了保存网页，然后按下“F12”键，看看你做的拖动页面酷不酷？

（出处：清风网络学院）

上一篇:菜鸟学用DreamWeaver做ASP

下一篇:Dreamweaver常用小技巧大汇总

用Dreamweaver图层实现拖拽效果相关文章：

·3DS Max 7卧室效果图设计：建模篇

·Photoshop实例：调出漂亮MM的唯美效果

·Flash如何制作灯光效果

·TCP/IP编程实现远程文件传输

·Visual C++ 实现数字化图像的分割

·Dreamweaver MX 2004做ASP程序(4)用户注册系统

用Dreamweaver图层实现拖拽效果相关软件：

·Dreamweaver 网页设计

·Dreamweaver MX试题汇编

·TCP-IP详解卷2：实现

·Macromedia DreamweaverV8.0 简体中文版

·边学边用Dreamweaver13讲(5-9)

·SRS Audio Sandbox(声卡效果增强软件) V1.6.7.

·边学边用Dreamweaver13讲(10-13)

·3ds max效果图制作入门必读

·Photoshop图象合成经典实例压缩版和1.40G的效果一样

·Dreamweaver轻松学

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源：http://www.vipcn.net

	\| 帮助(？) \| 版权声明 \| 友情连接 \| 关于我们 \| 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved.	鄂ICP备05000083号Powered by:viphot