Dreamweaver MX 2004 行为之拖动层

dreamweaver

· 拖动层

  拖动层动作允许访问者拖动层。使用此动作创建拼板游戏、滑块控件和其它可移动的界面元素。

  您可以指定访问者可以向哪个方向拖动层(水平、垂直或任意方向),访问者应该将层拖动到的目标、如果层在目标一定数目的像素范围内是否将层靠齐到目标,当层接触到目标时应该执行的操作和其它更多的选项。

  因为在访问者可以拖动层之前必须先调用“拖动层”动作,所以请确保触发该动作的事件发生在访问者试图拖动层之前。最佳的方法是(使用 onLoad 事件)将“拖动层”附加到 body 对象上,不过您也可以使用 onMouseOver 事件将它附加到填满整个层的链接上。

  具体制作的过程如下:

  选择“插入”-->>“布局对象”-->>“层”,在文档窗口中插入了一个层。该层为:Layer1。我们可以在层中插入一个图片。

  通过单击“文档”窗口底部标签选择器中的 <body> 选择 body 标签。

  打开“行为”面板,从“动作”中选择“拖动层”。如下图:


图片较大 请放大后查看

  在“层”弹出菜单中,选择要使其可拖动的层,如图:选“层Layer1”。

  从“移动”弹出菜单中选择“限制”或“不限制”。如图:选“不限制”。

  在“左”和“上”文本框中为拖放目标输入值(以像素为单位)。

  拖放目标是一个点,您想要访问者将层拖动到该点上。当层的左坐标和上坐标与在“左”和“上”文本框中输入的值匹配时便认为层已经到达拖放目标。这些值是与浏览器窗口的左上角相对的。

  在“靠齐距离”文本框中输入一个值(像素)确定访问者必须放目标多近,才能将层靠齐到目标。较大的值可以使访问者较容易找到拖放目标。

  注意行为面板中的动作为onload。保存页面,F12预览。

  别忘了我们是在学习啊!打开相应的在代码视图看看文件中新增加的代码,这样我们可以熟悉代码了啊!

注:本例只是一个简单的拖动层的实例,你可以充分发挥你的想象,做出更复杂的拖动层的效果,例如“拼图游戏”是拖动层的典型应用,用途十分广泛,大家可以自己试着做做。

时间: 2024-08-03 15:16:21

Dreamweaver MX 2004 行为之拖动层的相关文章

菜鸟学用Dreamweaver MX 2004行为(13)拖动层

dreamweaver 本站原创内容,转载请注明出处网页教学网. 拖动层 拖动层动作允许访问者拖动层.使用此动作创建拼板游戏.滑块控件和其它可移动的界面元素. 您可以指定访问者可以向哪个方向拖动层(水平.垂直或任意方向),访问者应该将层拖动到的目标.如果层在目标一定数目的像素范围内是否将层靠齐到目标,当层接触到目标时应该执行的操作和其它更多的选项. 因为在访问者可以拖动层之前必须先调用"拖动层"动作,所以请确保触发该动作的事件发生在访问者试图拖动层之前.最佳的方法是(使用 onLoad

Dreamweaver MX 2004 入门教程之层和层的应用

dreamweaver|教程|入门教程 层(Layer)是一种 HTML 页面元素,您可以将它定位在页面上的任意位置.层可以包 含文本.图像或其它 HTML 文档.层的出现使网页从二维平面拓展到三维.可以使页面上元素 进行重叠和复杂的布局.首先,请看下图: 我们首先来做一个层 1. 在「窗口」菜单>选"层",或点「插入」菜单>布局对象>选"层". 2. 在页面中显示一个层. 3. 通过周围的黑色调整柄拖动控制层的大小 4. 拖动层左上角的选择柄可以

Dreamweaver MX 2004 入门教程之层及应用

dreamweaver|教程|入门教程 本站原创内容,转载请注明出处网页教学网. 层(Layer)是一种 HTML 页面元素,您可以将它定位在页面上的任意位置.层可以包 含文本.图像或其它 HTML 文档.层的出现使网页从二维平面拓展到三维.可以使页面上元素 进行重叠和复杂的布局.首先,请看下图: 我们首先来做一个层 1. 在「窗口」菜单>选"层",或点「插入」菜单>布局对象>选"层". 2. 在页面中显示一个层. 3. 通过周围的黑色调整柄拖动控

菜鸟学用Dreamweaver MX 2004行为教程

dreamweaver|教程 1.菜鸟学用Dreamweaver MX 2004行为(16)设置文本 [2005-03-08]     2.菜鸟学用Dreamweaver MX 2004行为(15)显示弹出菜单 [2005-03-08]     3.菜鸟学用Dreamweaver MX 2004行为(14)预先载入图象 [2005-03-08]     4.菜鸟学用Dreamweaver MX 2004行为(13)拖动层 [2005-03-08]     5.菜鸟学用Dreamweaver MX

Dreamweaver MX 2004入门教程

dreamweaver|教程|入门教程 1.Dreamweaver MX 2004 入门教程之发布站点 [2005-03-08]     2.Dreamweaver MX 2004 入门教程之层及应用 [2005-03-08]     3.Dreamweaver MX 2004 入门教程之超级连接 [2005-03-08]     4.Dreamweaver MX 2004 入门教程之制作技巧 [2005-03-08]     5.Dreamweaver MX 2004 入门教程之页面编排 [2

Dreamweaver MX 2004入门教程层及应用

dreamweaver|教程|入门教程 层(Layer)是一种 HTML 页面元素,您可以将它定位在页面上的任意位置.层可以包含文本.图像或其它 HTML 文档.层的出现使网页从二维平面拓展到三维.可以使页面上元素进行重叠和复杂的布局.首先,请看下图: 我们首先来做一个层 1. 在「窗口」菜单>选"层",或点「插入」菜单>布局对象>选"层". 2. 在页面中显示一个层. 3. 通过周围的黑色调整柄拖动控制层的大小 4. 拖动层左上角的选择柄可以移动

Dreamweaver MX 2004从零开始

dreamweaver 随着Internet的普及,很多人已经不满足于仅仅上网冲浪,而希望深入地参与其中.现在,拥有自己的Web网站已经成为一种潮流.虽然制作一个简单的网页并不困难,但是制作出超凡脱俗的网站就不那么容易了,因此我们特意为大家准备了最新网站设计软件Dreamweaver MX 2004的系列教程,希望对大家有所帮助. 通常在一个网站中会有几十甚至几百个风格基本相似的页面,如果每次都重新设定网页结构以及相同栏目下的导航条.各类图标就显得非常麻烦,不过我们可以借助Dreamweaver

Dreamweaver MX 2004 入门教程之界面详解

dreamweaver|教程|入门教程|详解 本站原创内容,转载请注明出处网页教学网. Dreamweaver MX 2004 具有全新的风格和启动画面,请去baidu或google搜索这个软件下载并安装,在此不做详细介绍.Dreamweaver MX 2004提供了面向设计人员的布局和面向手工编码人员需求的布局.首次启动Dreamweaver MX 2004时,会出现一个工作区设置对话框(如下图): 您可以从中选择一种适合您的工作区布局.如果您不熟悉编写代码,请您选择"设计者".如果

Dreamweaver MX 2004从零开始(5)

dreamweaver 用行为丰富网页效果 行为可以说是Dreamweaver MX 2004中最有特色的功能,它可以让你不用书写一行JavaScript代码即可实现多种动态网页效果.行为的关键在于Dreamweaver MX 2004中提供了很多动作,其实就是标准的JavaScript程序,每个动作可以完成特定的任务.这样,如果你所需要的功能在这些动作中,那么就不要自己编写JavaScript程序了. 弹出消息框 如果希望别人进入网站首页的时候可以看见一个弹出的消息框来显示一些内容,则可以通过