当前位置：A5下载 > 网页制作 > js实现带按钮的上下滚动效果

js实现带按钮的上下滚动效果

时间：2015-05-13 09:25作者：zhao人气：219

本文实例讲述了js实现带按钮的上下滚动效果。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js带按钮上下滚动效果</title>

ul{

margin:0;

padding:0;

list-style:none;

height:100000px;

}

li{

margin:0;

padding:0;

width:100px;

height:100px;

display:block;

float:top;

margin-bottom:5px;

background:#009900;

}

#img_bag{

width:110px;

height:600px;

background:#F2F2F2;

margin:0 auto;

text-align:center;

}

#img_bag #img{

width:100px;

height:525px;

background:#969696;

overflow:hidden;

margin:auto;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

function $(obj){

//获取指定对象

return document.getElementById(obj);

}

var maxHeight=$("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;

//滚动图片的最大高度

var targety = 211;

//一次滚动距离

var dx;

var a=null;

function moveTop(){

var le=parseInt($("img").scrollTop);

if(le>211){

targety=parseInt($("img").scrollTop)-211;

}else{

targety=parseInt($("img").scrollTop)-le-1;

}

scTop();

}

function scTop(){

dx=parseInt($("img").scrollTop)-targety;

$("img").scrollTop-=dx*.3;

clearScroll=setTimeout(scTop,50);

if(dx*.3<1){

clearTimeout(clearScroll);

}

function moveBottom(){

var le=parseInt($("img").scrollTop)+211;

var maxL=maxHeight-600;

if(le<maxL){

targety=parseInt($("img").scrollTop)+211;

}else{

targety=maxL

}

scBottom();

}

function scBottom(){

dx=targety-parseInt($("img").scrollTop);

$("img").scrollTop+=dx*.3;

a=setTimeout(scBottom,50);

if(dx*.3<1){

clearTimeout(a)

}

</script>

</body>

</html>

运行效果如下所示：

java

希望本文所述对大家的javascript程序设计有所帮助。

标签实现,按钮,上下,滚动,效果,本文,实例,讲述了,实现,按钮

A5站长下载站

js实现带按钮的上下滚动效果

相关推荐

相关下载

网友评论

热门阅览

最新排行