| 网站首页 | 365bet开户娱乐 | 缤纷网络 | 资讯中心 | 教育资源 | 科技前沿 | 娱乐天地 | 视频Flash | 资源搜罗 | 
天宇网络
您现在的位置: 天宇网络 >> 365bet开户娱乐 >> 网页设计 >> 网页制作软件 >> 正文 今天是:
[组图]用Dreamweaver制作拖拽效果           ★★★
用Dreamweaver制作拖拽效果
作者:佚名 365bet平台返利_365bet彩票_澳门365bet来源:中国站长站 点击数: 更新时间:2004-6-15 12:35:00
在网上,我们经常可以看到一些非常实用的拖拽效果,特别是应用于网上购物时,访问者直接就可以把选中的物品拖拽到购物箱或者购物车里,非常方便、有趣。不过大多数人不知道,其实用Dreamweaver中的Behaviors也可以做出同样的效果来。如果你有兴趣,就和我一起来制作一个具有拖拽效果的的购物箱吧!

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

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

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


图1

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


图2

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


图3

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

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


365bet平台返利_365bet彩票_澳门365bet录入:admin    责任编辑:admin 
  • 上一篇365bet平台返利_365bet彩票_澳门365bet:

  • 下一篇365bet平台返利_365bet彩票_澳门365bet:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    专 题 栏 目
    最 新 热 门
    最 新 推 荐
    相 关 文 章
    解决VB.net中ReadProces
    深入Managed DirectX9(
    深入Managed DirectX9(
    关于VB提示ByRef参数类型
    ASP.net 2005 Treeview 
    ASP.NET 2.0中给DropDow
    《Effective C#》Item 1
    关于调用DTS包的代码
    C++ Multithreading
    关于ASP.NET中Resonse.Q
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)