av网站免费线看精品_国产做a爱视频免费不_深爱激情网开心五月天_伊人五月天在线视频网
 
慧網(wǎng)動態(tài) 常見問題 網(wǎng)絡(luò)營銷 網(wǎng)站設(shè)計(jì) 行業(yè)動態(tài) 網(wǎng)站優(yōu)化
dreamweaver制作可控制的橫向滾動
發(fā)布時(shí)間：2005-01-26　　　瀏覽次數(shù)：1187984
1. 在DreamWeaver里插入一個(gè)層，這個(gè)層做為滾動區(qū)域。設(shè)置層的參數(shù)如下： 設(shè)置層編號為：slayer ，也是層的ID屬性。左和上的值是層在頁面的位置可以根據(jù)需要自行設(shè)置；這里是100和1象素。寬和高是層的大小，也根據(jù)需要設(shè)置；剪輯是指層的顯示區(qū)域，在剪輯以外的部分被隱藏，我們利用這個(gè)顯示區(qū)域隱藏層的右面部分，然后控制層移動的同時(shí)控制這個(gè)顯示區(qū)域，來完成我們要的滾動區(qū)域效果。設(shè)置右為顯示的寬，這里為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" >我們在可以在層里橫著放一些圖片，這里用表格代替。而上面設(shè)置的層的大小正好能包容所有圖片。2. 下面代碼是層滾動代碼，我們插到層標(biāo)記< div >的下面：插入時(shí)注意layerW的值為剪輯(clip)右的值，這里為340。< script language="javascript" >< !-- //by hvevar layerW=340; //設(shè)定顯示區(qū)域的寬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. 再插入一個(gè)層放置“控制按鈕”。這個(gè)層靠在前面層的下面，用來放置“控制按鈕”，位置可以根據(jù)需要自行調(diào)整，如下圖。我們這里用表格的色塊當(dāng)作控制按鈕，如果做兩個(gè)箭頭形狀的圖片會更好. 在“控制按鈕”的標(biāo)記里分別加上下面代碼。這里是加在表格標(biāo)記< td >里的，如果你用圖片做按鈕則加在< img >標(biāo)記里。左按鈕：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,)"上面代碼的含義為當(dāng)鼠標(biāo)指向按鈕開始動作，按住則加快速度，鼠標(biāo)離開按鈕則停止動作，-號為反方向運(yùn)動。5. 完成當(dāng)鼠標(biāo)指向“控制按鈕”時(shí)，會向左或向右滾動，點(diǎn)住鼠標(biāo)不放會加快滾動速度。全部代碼為：（可以拷貝在BODY區(qū)測試）< 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; //設(shè)定顯示區(qū)域的寬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 >
立即預(yù)約