利用DW的DragLayer轻松实现可拖动层

2016-02-19 20:42 68 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐利用DW的DragLayer轻松实现可拖动层,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

浏览网页时,经常会看到一些类似图片或文字内容的东西,可以通过鼠标点击拖拉,任意地改变其在屏幕上的位置。其实,这种效果一般是通过“可拖动层”来完成的。

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

Dreamweaver有一个插件可以很快捷地做出此种效果,但是如果你手头上没有这个插件怎么办呢?没关系,我们利用DW的行为DragLayer(拖动层)也可以方便地做出此效果,它不比利用插件做出的逊色!

一.建立一个新层

1.打开DW,新建一网页。

2.使用InsertLayer(插入层)命令或者使用Object(对象)工具条中的DrawLayer(绘制层)工具插入一个层,并设定好大小及位置。打开Properties(属性)面板,在Bgcolor(背景)框中设置层的背景色为自己喜欢的颜色。设置高度、宽度。在layerID(层编号)框中设置这个层的名称为drag(或其它名字),如下图:

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

3.将鼠标定位在这个层中,利用InsertTable(插入表格)或由Object(对象)工具条中InsertTable(插入表格)工具在此层中插入一个3行1列的表格,设置表格的宽度和层的宽度一样。最上边的单元格高度为15px(或其它值).

4.简单修饰表格.修饰后效果如下图:

来源:https://www.tulaoshi.com/n/20160219/1624313.html

延伸阅读
注意:要设置form的controlbox属性为false, 特别注意: form.text要设置为空,否则不会把标题栏去掉 Dim MousX As Integer Dim MousY As Integer Dim CurrX As Integer Dim CurrY As Integer    Public Sub myMouseDown(ByVal send...
标签: Web开发
代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head     meta http-equiv="content-type" content="text/html; charset=...
标签: Web开发
使用本文提供的JavaScript脚本,配合的层和行为的运用,可以在页面中显示可拖动的精美月历。 具体制作步骤如下: 1、启动Dreamweaver MX,新建一个HTML文档,切换到代码视图,编写JavaScript脚本。 (1)在HTML文档的 head... /head插入下面的JavaScript脚本: SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" //定义月历函数 ...
标签: Web开发
如果你有用javascript写过拖动的话,应该知道是有多么麻烦的,不过yui3为大家提供了一个非常方便的方法实现拖动,今天我们先来看看使用yui3实现最简单拖动,首先贴出代码(如果你感兴趣,可以点击这里查看效果):上面我有相应的解释,这些解释都是我的个人理解,可能不完全对,但是这样就可以实现拖动了,如果你有正确的解释,请与我联系,...
标签: Web开发
在网页制作中我们经常会遇到有时需要制作页内连接的情况,比如首先列出一个目录,然后后面内容是按目录列出的,我们需要实现的是当点击目录中的一项时,直接转到内容页面。 首先把光标定位到要连接的内容页面的位置的左侧,然后插入命名锚记。 给锚记命名一个名称。 然后再选择目录,设置超级连接。 保存...

经验教程

897

收藏

42
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部