用Dreamweaver图层实现拖拽效果

小鬼芦

小鬼芦

2016-02-19 21:29

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的用Dreamweaver图层实现拖拽效果教程,一起来看看吧!超容易上手~

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  

图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”键,看看你做的拖动页面酷不酷?

展开更多 50%)
分享

猜你喜欢

用Dreamweaver图层实现拖拽效果

Web开发
用Dreamweaver图层实现拖拽效果

用Dreamweaver实现漫天花雨效果(1)

Web开发
用Dreamweaver实现漫天花雨效果(1)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用Dreamweaver实现Real与网页结合

Web开发
用Dreamweaver实现Real与网页结合

用Dreamweaver MX实现网站批量更新

Web开发
用Dreamweaver MX实现网站批量更新

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

深入Dreamweaver图层应用

Web开发
深入Dreamweaver图层应用

用Dreamweaver轻松实现Real与网页结合

Web开发
用Dreamweaver轻松实现Real与网页结合

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

优雅时尚女生qq网名 我对你只是在演戏

优雅时尚女生qq网名 我对你只是在演戏

css图像映射

css图像映射
下拉加载更多内容 ↓