dreamweaver制作可控制的横向滚动

来源：5D多媒体 作者：5D多媒体 出处：巧巧读书 2005-11-02 进入讨论组

• 关 键 词：
• dreamweaver
• javascript

上一页 1 2 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 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" 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 >
收藏 http://www.qqread.com/dreamweaver/w922351010.html进入讨论组讨论。

上一页 1 2 3 

【收藏此文】【大 中 小】【打印】【关闭】

较早的文章：Dreamweaver MX技巧汇粹

较新的文章：轻松打造弹出窗口