国产毛片午夜福利,国产黄网,国产亚洲天堂,97国产精品

  •  
    dreamweaver制作可控制的橫向滾動
    發(fā)布時(shí)間:2005-01-26   瀏覽次數(shù):1180237
    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ù)約