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

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

/p>

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

js带按钮上下滚动效果

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;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

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

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)

}

}

运行效果如下所示：

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