Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Dreamwaver教程 >> 正文

dreamweaver制作可控制的横向滚动
文章来源:5D多媒体

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" >

< !-- //by hve

var layerW=340; //设定显示区域的宽

var layerH=parseInt(slayer.style.height);

var layerL=parseInt(slayer.style.left);

var layerT=parseInt(slayer.style.top);

var step=0; //scroll value

function movstar(a,time){

if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)

mov(a);

movx=setTimeout("movstar("+a+","+time+")",time);

}

function movover(){

clearTimeout(movx);

}

function mov(a){

slayer.style.left = (step+=a) + layerL;

clipL=0-step;

clipR=layerW-step;

clipB=layerH;

clipT=0;

slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";

}

//-- >

< /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" >

< !-- //by hve

var layerW=340; //设定显示区域的宽

var layerH=parseInt(slayer.style.height);

var layerL=parseInt(slayer.style.left);

var layerT=parseInt(slayer.style.top);

var step=0; //scroll value

function movstar(a,time){

if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)

mov(a);

movx=setTimeout("movstar("+a+","+time+")",time);

}

function movover(){

clearTimeout(movx);

}

function mov(a){

slayer.style.left = (step+=a) + layerL;

clipL=0-step;

clipR=layerW-step;

clipB=layerH;

clipT=0;

slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";

}

//-- >

< /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 >

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有