<b>dreamweaver制作可掌握的横向转动</b>[DW设计]

1. 在里插入一个层,这个层做为转动区域.设置层的参数以下:



设置层编号为: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 >标志里.

左按钮:



右按钮:



上面代码的含义为当鼠标指向按钮开始行动,按住则加快速度,鼠标脱离按钮则终止行动,-号为反方向运动.

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" width="14" >< /td >

< td >< /td >

< td bgcolor="#CCCCCC" height="14" width="14" >< /td >

< /tr >

< /table >

< /div >