dreamweaver制作可控制的横向滚动

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 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. 再插入一个层安置“遏制按钮”。这个层靠在前方层的底下，用来安置“遏制按钮”，场所不妨按照须要自行安排，如次图。咱们这边用表格的色块看成遏制按钮，即使做两个箭镞形势的图片会更好。

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