1. 在DreamWeaver里插入一个层，这个层做为滚动区域。设置层的参数如下： 设置层编号为：slayer ，也是层的ID属性。左和上的值是层在页面的位置可以根据需要自行设置；这里是100和1象素。宽和高是层的大小，也根据需要设置；剪辑是指层的显示区域，在剪辑以外的部分被隐藏，我们利用这个显示区域隐藏层的右面部分，然后控制层移动的同时控制这个显示区域，来完成我们要的滚动区域效果。设置右为显示的宽，这里为340；下等于高。下面为层的代码：< div id="slayer" style="position:absolute; top: 1px; left: 100px; clip: rect(0 340 1 0); height: 1px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 670px" >我们在可以在层里横着放一些图片，这里用表格代替。而上面设置的层的大小正好能包容所有图片。2. 下面代码是层滚动代码，我们插到层标记< div >的下面：插入时注意layerW的值为剪辑(clip)右的值，这里为340。< script language="javascript" >< !-- //by hvevar layerW=340; //设定显示区域的宽var layerH=parseInt(slayer.style.height);var layerL=parseInt(slayer.style.left);var layerT=parseInt(slayer.style.top);var step=0; //scroll valuefunction 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. 再插入一个层放置“控制按钮”。这个层靠在前面层的下面，用来放置“控制按钮”，位置可以根据需要自行调整，如下图。我们这里用表格的色块当作控制按钮，如果做两个箭头形状的图片会更好. 在“控制按钮”的标记里分别加上下面代码。这里是加在表格标记< td >里的，如果你用图片做按钮则加在< img >标记里。左按钮：onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,)" onMouseUp="movover();movstar(1,)"右按钮：onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,)" onMouseUp="movover();movstar(-1,)"上面代码的含义为当鼠标指向按钮开始动作，按住则加快速度，鼠标离开按钮则停止动作，-号为反方向运动。5. 完成当鼠标指向“控制按钮”时，会向左或向右滚动，点住鼠标不放会加快滚动速度。全部代码为：（可以拷贝在BODY区测试）< div id="slayer" style="position:absolute; top: 1px; left: 100px; clip: rect(0 340 1 0); height: 1px; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; width: 670px" > < script language="javascript" >< !-- //by hvevar layerW=340; //设定显示区域的宽var layerH=parseInt(slayer.style.height);var layerL=parseInt(slayer.style.left);var layerT=parseInt(slayer.style.top);var step=0; //scroll valuefunction 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:px; z-index:1; left: 97px; top: 244px" > < table width="" height="" >< tr > < td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,)" onMouseUp="movover();movstar(1,)" width="14" >< /td >< td >< /td >< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,)" onMouseUp="movover();movstar(-1,)" width="14" >< /td >< /tr >< /table >< /div >
上一篇：
碟软科技动态网页设计---在线招聘系统