站长学堂
你的位置: 中国个人站长站 -- 站长学堂 -- 网页制作 -- Dreamweaver教程 -- 文章正文 dreamweaver制作可控制的横向滚动
推荐位

dreamweaver制作可控制的横向滚动

中国个人站长站 Dreamweaver教程 点击数: 更新时间:2005-3-13 17:36:18
)" 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 >

< /d

上一页  [1] [2] [3] 下一页

Dreamwea… 网友投稿 文章录入:swh    责任编辑:swh 
个人站长站与你风雨同舟!
本站所提供的资源均来源于互联网,如有侵权行为,请与本站管理员联系,我们会第一时间删除!
·如果您发现《dreamweaver制作可控制的横向滚动》文章有错误,也请通知我们修改!
联系邮箱chinageren#126.com,谢谢支持!
站内搜索:
版权所有:中国个人站长站 2007-2008 未经授权禁止复制或建立镜像 客服QQ号:112731235
copyright © 2007-2008 www.ChinaGeRen.com online services. all rights reserved. 苏ICP备05000059号