请教一下向上滚动的相册效果功能（100分，解决马上结贴）

用js实现控制内容的向上向下滚动效果
<SCRIPT language=JavaScript1.2> 
iens6=document.all||document.getElementById 
ns4=document.layers 
//specify speed of scroll (greater=faster) 
var speed=10 
if (iens6){ 
document.write('<div id="container" style="position:relative;width:600;height:430;border:0px solid black;overflow:hidden">') 
document.write('<div id="content" style="position:absolute;width:590;left:0;top:0">') 
} 
</SCRIPT>
<SCRIPT language=JavaScript1.2> 
if (iens6) 
document.write('</div></div>') 
</SCRIPT>
<SCRIPT language=JavaScript1.2> 
if (iens6){ 
var crossobj=document.getElementById? document.getElementById("content") : document.all.content 
var contentheight=crossobj.offsetHeight 
} 
else if (ns4){ 
var crossobj=document.nscontainer.document.nscontent 
var contentheight=crossobj.clip.height 
} 
function movedown(){ 
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100)) 
crossobj.style.top=parseInt(crossobj.style.top)-speed 
else if (ns4&&crossobj.top>=(contentheight*(-1)+100)) 
crossobj.top-=speed 
movedownvar=setTimeout("movedown()",100) 
} 
function moveup(){ 
if (iens6&&parseInt(crossobj.style.top)<=0) 
crossobj.style.top=parseInt(crossobj.style.top)+speed 
else if (ns4&&crossobj.top<=0) 
crossobj.top+=speed 
moveupvar=setTimeout("moveup()",100) 
} 
function getcontent_height(){ 
if (iens6) 
contentheight=crossobj.offsetHeight 
else if (ns4) 
document.nscontainer.document.nscontent.visibility="show" 
} 
window.onload=getcontent_height 
</SCRIPT> 

解决方案 »

  1.   

    参考下面的代码,注意改了下你的main 的div的位置为absolute了，而已把两个向下向上的div移动了位置,要不会一起移动,css也改了下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus">
      <meta name="author" content="">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <style type="text/css">
    *{margin:0;padding:0;}
    img{width:150px;height:80px;border:1px solid #ccc;}
    #main{width:200px;text-align:center;border:2px solid #ccc;margin:20px;position:absolute;height:430px;overflow:hidden;top:20px;left:20px}
    #top{position:absolute;top:0;background:#456;line-height:20px;width:205px;left:40px;top:20px;z-index:10;text-align:center;}
    #bottom{bottom:0;position:absolute;background:#456;line-height:20px;width:205px;left:40px;top:475px;z-index:10;text-align:center;height:20px}
      </style>
      <script>
      var main,Up=false,Down=false;
      window.onload=function()
      {
        main=document.getElementById("main");
        if(main.scrollHeight<main.offsetHeight)
        {
          Up=false;
          Down=false;
        }
        else
        {
          Up=true;
          Down=false;
        }
      }
    function ScrollUp()
    {
      if(Up)
      {    
        if(main.scrollTop+main.offsetHeight<=main.scrollHeight)//注意这里是已经卷去的高度和main div显示的高度和
        {
          main.scrollTop+=1;
          setTimeout("ScrollUp()",10);
        }
        else
        {
          Up=false;
          Down=true;
        }
      }  
    }
    function ScrollDown()
    {
      if(Down)
      {    
        if(main.scrollTop>0)
        {
          main.scrollTop-=1;
          setTimeout("ScrollDown()",10);
        }
        else
        {
          Up=true;
          Down=false;
        }
      }  
    }
      </script>
     </head> <body>
      <div id="top" onclick="ScrollUp()">向上</div>
      <div id="bottom" onclick="ScrollDown()">向下</div>
      <div id="main">     
        <div id="content">
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
        </div>
      </div>
     </body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus">
      <meta name="author" content="">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <style type="text/css">
    *{margin:0;padding:0;}
    img{width:150px;height:80px;border:1px solid #ccc;}
    #main{width:200px;text-align:center;border:2px solid #ccc;margin:20px;position:absolute;height:430px;overflow:hidden;top:20px;left:20px}
    #top{position:absolute;top:0;background:#456;line-height:20px;width:205px;left:40px;top:20px;z-index:10;text-align:center;}
    #bottom{bottom:0;position:absolute;background:#456;line-height:20px;width:205px;left:40px;top:475px;z-index:10;text-align:center;height:20px}
      </style>
      <script>
      var main,Up=false,Down=false;
      window.onload=function()
      {
        main=document.getElementById("main");
        if(main.scrollHeight<main.offsetHeight)
        {
          Up=false;
          Down=false;
        }
        else
        {
          Up=true;
          Down=false;
        }
      }
    function ScrollUp()
    {
      if(Up)
      {    
        if(main.scrollTop+main.offsetHeight<=main.scrollHeight)//注意这里是已经卷去的高度和main div显示的高度和
        {
          main.scrollTop+=1;
          setTimeout("ScrollUp()",10);
        }
        else
        {
          Up=false;
          Down=true;
        }
      }  
    }
    function ScrollDown()
    {
      if(Down)
      {    
        if(main.scrollTop>0)
        {
          main.scrollTop-=1;
          setTimeout("ScrollDown()",10);
        }
        else
        {
          Up=true;
          Down=false;
        }
      }  
    }
      </script>
     </head> <body>
      <div id="top" onclick="ScrollUp()">向上</div>
      <div id="bottom" onclick="ScrollDown()">向下</div>
      <div id="main">     
        <div id="content">
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
        </div>
      </div>
     </body>
    </html>
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus">
      <meta name="author" content="">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <style type="text/css">
    *{margin:0;padding:0;}
    img{width:150px;height:80px;border:1px solid #ccc;}
    #main{width:200px;text-align:center;border:2px solid #ccc;margin:20px;position:absolute;height:430px;overflow:hidden;top:20px;left:20px}
    #top{position:absolute;top:0;background:#456;line-height:20px;width:205px;left:40px;top:20px;z-index:10;text-align:center;}
    #bottom{bottom:0;position:absolute;background:#456;line-height:20px;width:205px;left:40px;top:475px;z-index:10;text-align:center;height:20px}
      </style>
      <script>
      var main,Up=false,Down=false;
      window.onload=function()
      {
        main=document.getElementById("main");
        if(main.scrollHeight<main.offsetHeight)
        {
          Up=false;
          Down=false;
        }
        else
        {
          Up=true;
          Down=false;
        }
      }
    function ScrollUp()
    {
      if(Up)
      {    
        if(main.scrollTop+main.offsetHeight<=main.scrollHeight)//注意这里是已经卷去的高度和main div显示的高度和
        {
          main.scrollTop+=1;
          setTimeout("ScrollUp()",10);
        }
        else
        {
          Up=false;
          Down=true;
        }
      }  
    }
    function ScrollDown()
    {
      if(Down)
      {    
        if(main.scrollTop>0)
        {
          main.scrollTop-=1;
          setTimeout("ScrollDown()",10);
        }
        else
        {
          Up=true;
          Down=false;
        }
      }  
    }
      </script>
     </head> <body>
      <div id="top" onclick="ScrollUp()">向上</div>
      <div id="bottom" onclick="ScrollDown()">向下</div>
      <div id="main">     
        <div id="content">
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
            <img src="http://www.baidu.com/img/logo.gif" />
            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
        </div>
      </div>
     </body>
    </html>
      

  4.   

    #showbo 欲哭无泪啊，把分错给了＃xiaojing7 不好意思啊。