游客:
注册
|
登录
|
帮助
网友俱乐部
»
网页制作
»
Dreamweaver教程
» dreamweaver制作可控制的横向滚动
网友生活网
|
网友学堂
如何获得金币?
诚招斑竹
IP归属地查询 PR查询 收录查询 whois查询
免费超短2级域名,your.jpy.cc
传世私服
|
传奇世界私服
注册亚洲交友中心,找个人来同居吧!
7CODE查杀恶意代码,守护您的电脑
‹‹ 上一主题
|
下一主题 ››
投票
交易
悬赏
活动
打印
|
推荐
|
订阅
|
收藏
标题: dreamweaver制作可控制的横向滚动
lonjew
元帅
UID 73191
精华
1
积分 30615
帖子 14941
威望 3
金币 14931
热心 12
阅读权限 100
注册 2008-1-28
状态 离线
#1
使用道具
发表于 2008-4-23 09:14
资料
个人空间
主页
短消息
加为好友
dreamweaver制作可控制的横向滚动
1. 在DreamWeaver里插入一个层,这个层做为滚动区域。
设置层的参数如下: http://webdesign.chinaitlab.com/UploadFiles_8014/200605/20060511161435675.gif
设置层编号为:slayer ,也就是层的ID属性。
左和上的值是层在页面的位置可以根据需要自行设置;这里是100和120象素。
宽和高是层的大小,也根据需要设置; 剪辑是指层的显示区域,在剪辑以外的部分被隐藏,我们利用这个显示区域隐藏层的右面部分,然后控制层移动的同时控制这个显示区域,来完成我们要的滚动区域效果。
设置右为显示的宽,这里为340;下等于高。
下面为层的代码: 我们在可以在层里横着放一些图片,这里用表格代替。而上面设置的层的大小正好能包容所有图片。
2. 下面代码是层滚动代码,我们插到层标记的下面: 插入时注意layerW的值为剪辑(clip)右的值,这里为340。
-parseInt(slayer.scrollWidth) layerWa >0&&step
3. 再插入一个层放置“控制按钮”。
这个层靠在前面层的下面,用来放置“控制按钮”,位置可以根据需要自行调整,如下图。我们这里用表格的色块当作控制按钮,如果做两个箭头形状的图片会更好
http://webdesign.chinaitlab.com/UploadFiles_8014/200605/20060511161435748.gif .
在“控制按钮”的标记里分别加上下面代码。
这里是加在表格标记里的,如果你用图片做按钮则加在标记里。
左按钮: onMouseOut="movover()"
右按钮: onMouseOut="movover()"
上面代码的含义为当鼠标指向按钮开始动作,按住则加快速度,鼠标离开按钮则停止动作,-号为反方向运动。
5. 完成 当鼠标指向“控制按钮”时,会向左或向右滚动,点住鼠标不放会加快滚动速度。
全部代码为:(可以拷贝在BODY区测试)
-parseInt(slayer.scrollWidth) layerWa >0&&step
网友
lonjew
签名 - 网友社区
==
[广告]
免费域名(Free Subdomain)
免费空间(Free hosting)
PR查询(Google Pagerank)
投票
交易
悬赏
活动
控制面板首页
编辑个人资料
积分交易
公众用户组
好友列表
个人空间管理
基本概况
流量统计
客户软件
发帖量记录
论坛排行
主题排行
发帖排行
积分排行
在线时间
管理团队
管理统计
当前时区 GMT+8, 现在时间是 2008-9-8 16:29
信产部ICP备案:
京ICP备05066424号
北京市公安局网监备案:1101050648号
Powered by
Discuz!
5.5.0
TOP
清除 Cookies
-
联系我们
-
网友俱乐部
-
Archiver
-
WAP