怎么用dreamweaver制作拖拽效果
【提要】本篇《Dreamweaver如何制作拖拽效果》特别为需要编程学习的朋友收集整理的,仅供参考。内容如下:
在网上,我们经常可以看到一些非常实用的拖拽效果,特别是应用于网上购物时,访问者直接就可以把选中的物品拖拽到购物箱或者购物车里,非常方便、有趣。不过大多数人不知道,其实用Dreamweaver中的Behaviors也可以做出同样的效果来。以下是小编为大家搜索整理的Dreamweaver如何制作拖拽效果,希望能给大家带来帮助!更多精彩内容请持续关注我们考试网!
在做拖拽效果的网页之前,首先我们要准备一些图片。比如用作购物箱或购物车的一张大图片,外加几张代表物品的小图片。我在这儿准备了一个购物袋,还有几样物品,它们分别是:手机、游戏手柄和汽车(哇!汽车也可以拖进购物袋中啊!)。
准备好了图片,就可以开始我们的`工作了。打开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”键,看看你做的拖动页面酷不酷?
-
javascript中的return和闭包函数
复制代码代码如下:functionmakefunc(x){returnfunction(){returnx;}}alert(makefunc(0));其实不是不执行,只是朋友的意思这里alert出来的`应该是“0”,而不是function(){returnx;}。不是脚本写错了,只是没搞懂return,从当前函数退出,并从那个函数返回一个值。如果返...
-
学习JavaScript的7个理由
为什么要学习JavaScript?学习JavaScript对我们的工作有什么帮助么?下面YJBYS小编为大家讲解!需求我之所以这样说的主要原因是,随着JavaScript的日渐成熟,以及方案变得越来越可行,我们对JavaScript程序员的需求正在持续增长。JavaScript在需求比例上已经超过了C#,仅...
-
javascript设置创建动态表格的方法
两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下方法一:最原始的方法,创建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//开始appendchild()追加各个元素ndChild(a4);ndChild(a3);nd...
-
如何理解Javascript的caller,callee,call,apply区别
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:argumentsarguments该对象代表正在执行的函数和调用它的函数的参数。[function.]arguments[n]参数function:选项。当前正在执行的Function对象的名字。n:选项。要传递给Function对象的从0开始的参数值...