1. 在DreamWeaver里插入一个层,这个层做为滚动区域。设置层的参数如下: 2. 下面代码是层滚动代码,我们插到层标记< div >的下面: 4. 在“控制按钮”的标记里分别加上下面代码。
设置层编号为: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” >
我们在可以在层里横着放一些图片,这里用表格代替。而上面设置的层的大小正好能包容所有图片。
插入时注意layerW的值为剪辑(clip)右的值,这里为340。
< 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 >
3. 再插入一个层放置“控制按钮”。
这个层靠在前面层的下面,用来放置“控制按钮”,位置可以根据需要自行调整,如下图。我们这里用表格的色块当作控制按钮,如果做两个箭头形状的图片会更好。
这里是加在表格标记< 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 >
dreamweaver制作可控制的横向滚动_dreamweaver教程
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » dreamweaver制作可控制的横向滚动_dreamweaver教程
相关推荐
-      用dreamweaver制作网页时关于文字自动换行的小技巧_dreamweaver教程
-      dreamweaver经典插件下载_dreamweaver教程
-      dreamweaver简单描述制作网页的基本步骤_dreamweaver教程
-      通过dreamweaver设计网页时组织css的建议_dreamweaver教程
-      学习dreamweaver8了解掌握css层叠样式表_dreamweaver教程
-      dreamweaver制作复杂交换图像_dreamweaver教程
-      利用dreamweaver8掌握网页代码基本格式_dreamweaver教程
-      用dreamweaver8在网页中插入flash视频_dreamweaver教程