DW制作可控制的横向滚动-青岛设计网论坛


论坛首页 Dreamweaver/Fireworks DW制作可控制的横向滚动

[公告]快到[搜艺招聘网]发布招聘信息注册简历、发布自己作品！：）

DW制作可控制的横向滚动

admin

查看admin的博客

金钱	: 2054
Level	: 0
发帖数	: -277
最后登陆	: 2019/1/21
注册时间	: 2002/12/30

信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除

DW制作可控制的横向滚动

1. 在DreamWeaver里插入一个层，这个层做为滚动区域。设置层的参数如下：

设置层编号为：slayer ，也就是层的ID属性。

　　左和上的值是层在页面的位置可以根据需要自行设置；这里是100和120象素。

　　宽和高是层的大小，也根据需要设置；

　　剪辑是指层的显示区域，在剪辑以外的部分被隐藏，我们利用这个显示区域隐藏层的右面部分，然后控制层移动的同时控制这个显示区域，来完成我们要的滚动区域效果。

　　设置右为显示的宽，这里为340；下等于高。

　　下面为层的代码：

<div id="slayer" style="position:absolute; top: 120px; left: 100px; clip: rect(0 340 120 0); height: 120px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 670px">

　　我们在可以在层里横着放一些图片，这里用表格代替。而上面设置的层的大小正好能包容所有图片。

　　2. 下面代码是层滚动代码，我们插到层标记<div>的下面：

　　插入时注意layerW的值为剪辑(clip)右的值，这里为340。

<script language="javascript">

</script>

　　设置层编号为：slayer ，也就是层的ID属性。

　　左和上的值是层在页面的位置可以根据需要自行设置；这里是100和120象素。

　　宽和高是层的大小，也根据需要设置；

　　剪辑是指层的显示区域，在剪辑以外的部分被隐藏，我们利用这个显示区域隐藏层的右面部分，然后控制层移动的同时控制这个显示区域，来完成我们要的滚动区域效果。

　　设置右为显示的宽，这里为340；下等于高。

　　下面为层的代码：

<div id="slayer" style="position:absolute; top: 120px; left: 100px; clip: rect(0 340 120 0); height: 120px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 670px">

　　我们在可以在层里横着放一些图片，这里用表格代替。而上面设置的层的大小正好能包容所有图片。

　　2. 下面代码是层滚动代码，我们插到层标记<div>的下面：

　　插入时注意layerW的值为剪辑(clip)右的值，这里为340。

<script language="javascript">

</script>

3. 再插入一个层放置“控制按钮”。

　　这个层靠在前面层的下面，用来放置“控制按钮”，位置可以根据需要自行调整，如下图。我们这里用表格的色块当作控制按钮，如果做两个箭头形状的图片会更好。

4. 在“控制按钮”的标记里分别加上下面代码。

　　这里是加在表格标记<td>里的，如果你用图片做按钮则加在<img>标记里。

　　左按钮：

onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"

　　右按钮：

onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"

　　上面代码的含义为当鼠标指向按钮开始动作，按住则加快速度，鼠标离开按钮则停止动作，-号为反方向运动。

　　5. 完成

　　当鼠标指向“控制按钮”时，会向左或向右滚动，点住鼠标不放会加快滚动速度。

　　全部代码为：（可以拷贝在BODY区测试）

<div id="slayer" style="position:absolute; top: 120px; left: 100px; clip: rect(0 340 120 0); height: 120px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 670px">
<script language="javascript">

</script>
<table cellspacing="10" border="0" cellpadding="0">
<tr bgcolor="#FFCC99">
<td height="100" width="100"> </td>
<td height="100" width="100"> </td>
<td height="100" width="100"> </td>
<td height="100" width="100"> </td>
<td height="100" width="100"> </td>
<td height="100" width="100"> </td>
</tr>
</table>
</div>
<div id="Layer1" style="position:absolute; width:344px; height:20px; z-index:1; left: 97px; top: 244px">
<table width="100%" height="100%">
<tr>
<td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)" width="14"></td>
<td></td>
<td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)" width="14"></td>
</tr>
</table>
</div>

搜艺招聘 - 艺术设计人才招聘网 - 真诚成就梦想,实干创造未来

搜艺招聘网:http://www.soyi365.com
搜艺招聘网论坛:http://bbs.soyi365.com

搜艺招聘网-北京站:http://beijing.soyi365.com
搜艺招聘网-天津站:http://tianjin.soyi365.com
搜艺招聘网-上海站:http://shanghai.soyi365.com
搜艺招聘网-重庆站:http://chongqing.soyi365.com
搜艺招聘网-深圳站:http://shenzhen.soyi365.com

2006/5/19

信息 | 留言 | 引用 | 回复 | 编辑 | 置顶 | 移动 | 删除