随意拖动的图片

在某些电子商务网站上,经常会见到把商品用鼠标直接拖拽到购物车中的情形。在某些在线游戏网站,偶尔还会玩一些拼图游戏等。这些效果可以用Dreamweaver实现。这些使用鼠标拖拽对象行为在Dreamweaver中就称之为Drag Layer。使用这个动作的时候,可以规定浏览者用鼠标拖拽对象的方向,浏览者要将对象拖动到的那个目标,并且,如果这个对象处于目标周围一定的坐标范围内,还可以自动地依附到目标上。更神奇的是,当对象到达目标时,可以规定将要发生的事情。下面讲解下使用Drag Layer动作的全过程。

首先选择工具面板中的层按钮,插入一个新层,并在层中插入一个对象。确保不选中这一层,然后点击行为面板中的+号,从中选择Drag Layer,将弹出对话框。这个对话框有两个标签,分别是Basic和Advanced,在标签Basic中,作如下设置:1、选定将要被拖拽的层名称。2、Movement:它有两个选项,Unconstrained和Constrained。前者的意思是用户的鼠标拖拽不受任何限制。如果选择后者,则限制了鼠标拖拽的范围。通过在Up、down、left、right中键入坐标值,确定鼠标拖拽的区域。3、Drop Target:设定拖拽层的目标位置的坐标值。4、Snap If Within设定了可拖拽的那一层处于距离目标多远的范围内,如果在范围内,则自动依附到目标的位置上。

如果想在被拖拽的层到达一个目标后,导致某种行为的产生,比如,在购物网站中, 将物品拖至购物车后,告知用户订购成功的信息。这种情况下,就需要设置Drag Layer动作对话框中Advanced标签的内容,1、Drag Handle:①如果选择Entire Layer,则鼠标可以拖拽层的任何部位。②如果选择Area within layer则只有在这一层被设定范围内的部分可以导致鼠标拖拽动作的发生。这时,需要设置顶端、底端、左端、右端的位置值。2、While dragging:如果选中了这个复选框,在鼠标拖拽时,都将出现在所有层的最上方。3、Call javascript:在鼠标拖拽层的过程中,可以调用javascript函数。比如,可以告诉浏览者一些诸如“你距离目的地还有多远”之类的信息。(5)When dropped:当鼠标拖拽层之后,释放层时,调用javascript函数。(6)Only if snapped:如果选中这项,则仅当层已经被拖拽到设定的目标位置时,才调用javascript函数。

按照上面讲解的各选项设置的用法,可以轻松地按照每个人所希望的设置完成。这时,在浏览器中打开页面,就可以欣赏到作品了。

分类目录: 建站教程 | 标签: 随意  拖动  图片   | 评论:0
上一篇: 网站设计中动画如何分类
下一篇: 制作抽线图