当前位置：首页 -> 网页设计 -> DREAMWEAVER -> 用Dreamweaver制作拖拽效果

用Dreamweaver制作拖拽效果

时间： 2021-07-31 作者：daque

在网上，咱们常常不妨看到少许特殊适用的拖拽功效，更加是运用于网上购物时，考察者径直就不妨把选中的货色拖拽到购物箱大概购物车里，特殊简单、风趣。然而大普遍人不领会，本来用dreamweaver中的behaviors也不妨做出同样的功效来。即使你有爱好，就和我一道来创造一个具备拖拽功效的的购物箱吧！在做拖拽功效的网页之前，开始咱们要筹备少许图片。比方用作购物箱或购物车的一张大图片，附加几张代办货色的小图片。我在这边筹备了一个购物袋，再有几样货色，它们辨别是：大哥大、玩耍手柄和公共汽车(哇！公共汽车也不妨拖进购物袋中啊！)。

用dreamweaver制作拖拽效果

筹备好了图片，就不妨发端咱们的处事了。翻开dreamweaver，兴建一个页面，在东西面板中采用图层东西，而后用鼠标在页面上拖出一个图层来(大概采用“insert/layer”，插入一个新层)。而后，把鼠标放进层中，再采用“东西/插入图像东西”，在此图层中插入方才筹备好的一个图片。

反复上头的举措，再接着插入3个图层，而后在此3个图层中辨别插入你筹备好的其余几张图片。实行后功效如图1。图1

用dreamweaver制作拖拽效果

好了，要害的一步来了。点击“窗口/举措”，会弹出“举措(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”标志。

用dreamweaver制作拖拽效果