webdn
 
  首页     免费截图     VIP会员区     广告Banner     技术文档     网站模板  
网站截图,网站每日新 !
虚拟主机
网页模板


 

用 Dreamweaver 制作拖拽效果

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

  在做拖拽效果的网页之前,首先我们要准备一些图片。比如用作购物箱或购物车的一张

  大图片,外加几张代表物品的小图片。我在这儿准备了一个购物袋,更有几样物品,他们分别是:手机、游戏手柄和汽车。

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

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

  



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

  



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

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





电话咨询:010-60520722 QQ咨询:3792656   |   583696287   |   66733350 关于WebDN  |  站点地图  |  联系我们  |  支付方式  |  友情链接
© 2004-2008 WebDN.com 版权所有. 沪ICP备05040479号