dreamweaver制作可控制的横向滚动-江西广告圈内-江西广告网-江西广告网-江西广告门户网-江西广告行业独具权威价值平台-江西广告精准互动平台

郁闷小男人 发表于 2008-12-7 13:35:36

dreamweaver制作可控制的横向滚动

1. 在DreamWeaver里插入一个层，这个层做为滚动区域。设置层的参数如下： <IMG src="/bbs/attachments/websoft/20081206/200812713334595377801.gif"> 设置层编号为：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 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. 再插入一个层放置“控制按钮”。 这个层靠在前面层的下面，用来放置“控制按钮”，位置可以根据需要自行调整，如下图。我们这里用表格的色块当作控制按钮，如果做两个箭头形状的图片会更好。 <IMG src="/bbs/attachments/websoft/20081206/2008127133346077802.gif">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" cellp

页: [1]

江西广告网's Archiver

dreamweaver制作可控制的横向滚动