求一段DIV向上下滑动的代码,谢谢

kaven0713 2015-09-15 08:38:43


效果像图片中的这样,谢谢了
...全文
292 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
zpjshiwo77 2015-09-15
  • 打赏
  • 举报
回复
哥,你没贴代码出来,我作为一个才学了1个星期JS的实习生,感觉要帮你解决这个问题有点难度! 我现在凭空想得话,感觉思路是这样的:你本来应该是定义好了一个height:2000px;的div,然后在里面动态生成了li;你现在可以先定义多个height:500px;的div,然后调用你生成li的JS加一些限定条件,在每个里面只生成一部分。 我只能帮你到这了,剩下的你需要自己解决了~~
kaven0713 2015-09-15
  • 打赏
  • 举报
回复
引用 7 楼 zpjshiwo77 的回复:
把你哪个大的div分成多块,做成一个图片轮播的效果

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <title>JS test</title>
    <script type="text/javascript">
    var i=1; 
   $(document).ready(function(){
      $("#button2").click(function(){
      	if(i==1){
      		$("#div1").slideUp("slow");
      		$("#div2").slideDown("slow");
      		i++;
      	}
      	else if(i==2){
      		$("#div2").slideUp("slow");
      		$("#div3").slideDown("slow");
      		i++;
      	}
      	else if(i==3){
      		$("#div3").slideUp("slow");
      		$("#div1").slideDown("slow");
      		i=1;
      	}
      });
      $("#button1").click(function(){
        if(i==1){
      		$("#div1").slideUp("slow");
      		$("#div3").slideDown("slow");
      		i=3;
      	}
      	else if(i==2){
      		$("#div2").slideUp("slow");
      		$("#div1").slideDown("slow");
      		i--;
      	}
      	else if(i==3){
      		$("#div3").slideUp("slow");
      		$("#div2").slideDown("slow");
      		i--;
      	}
      });

    });
    </script>
    <style type="text/css">
     body{
   margin: 0px;
   padding: 0px;
  }
  .top{
    height: 100px;
    width: 200px;
    background-color: red;
  }
  .middle{
    height: 400px;
    width: 200px;
    background-color: yellow;
  }
  .none{
  	display: none;
  }
  .middle ul{
  	margin: 0px;
  }
  .middle li{
    display: block;
  }
    </style>
</head>
<body>
  <div style="width:200px;">
    <div id="button1"class="top"></div>
    <div id="div1" class="middle">
      <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
      </ul>
    </div>
    <div id="div2" class="middle none">
      <ul>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
      </ul>
    </div>
    <div id="div3" class="middle none">
      <ul>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      </ul>
    </div>
    <div id="button2" class="top"></div>
  </div>
</body>
</html>

思路不错,不过我左边这个菜单是动态生成的,需要计算高度,比如说第一页0->600;第二页600->1200,这样怎么操作?
zpjshiwo77 2015-09-15
  • 打赏
  • 举报
回复
把你哪个大的div分成多块,做成一个图片轮播的效果

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <title>JS test</title>
    <script type="text/javascript">
    var i=1; 
   $(document).ready(function(){
      $("#button2").click(function(){
      	if(i==1){
      		$("#div1").slideUp("slow");
      		$("#div2").slideDown("slow");
      		i++;
      	}
      	else if(i==2){
      		$("#div2").slideUp("slow");
      		$("#div3").slideDown("slow");
      		i++;
      	}
      	else if(i==3){
      		$("#div3").slideUp("slow");
      		$("#div1").slideDown("slow");
      		i=1;
      	}
      });
      $("#button1").click(function(){
        if(i==1){
      		$("#div1").slideUp("slow");
      		$("#div3").slideDown("slow");
      		i=3;
      	}
      	else if(i==2){
      		$("#div2").slideUp("slow");
      		$("#div1").slideDown("slow");
      		i--;
      	}
      	else if(i==3){
      		$("#div3").slideUp("slow");
      		$("#div2").slideDown("slow");
      		i--;
      	}
      });

    });
    </script>
    <style type="text/css">
     body{
   margin: 0px;
   padding: 0px;
  }
  .top{
    height: 100px;
    width: 200px;
    background-color: red;
  }
  .middle{
    height: 400px;
    width: 200px;
    background-color: yellow;
  }
  .none{
  	display: none;
  }
  .middle ul{
  	margin: 0px;
  }
  .middle li{
    display: block;
  }
    </style>
</head>
<body>
  <div style="width:200px;">
    <div id="button1"class="top"></div>
    <div id="div1" class="middle">
      <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
      </ul>
    </div>
    <div id="div2" class="middle none">
      <ul>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
       <li>22222</li>
      </ul>
    </div>
    <div id="div3" class="middle none">
      <ul>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      	<li>33333</li>
      </ul>
    </div>
    <div id="button2" class="top"></div>
  </div>
</body>
</html>

kaven0713 2015-09-15
  • 打赏
  • 举报
回复
引用 5 楼 zpjshiwo77 的回复:
[quote=引用 3 楼 kaven0713 的回复:] 我的div可能有2000px以上,我想只显示窗体高度,显示不全的点击上下滑动显示
限定你这个div的高度,在它的css里面加上overflow: auto; 。你这个div里面的内容如果过多的话,会自然把这个div撑开,出现滚动条。[/quote] 对不起,我表述可能有问题,效果不是点击下面那个滑块把菜单收上去。 我想要的效果是点击上下滑块的时间这个div上下滚动。因为DIV太长了,需要上下滚动才能看的完。
zpjshiwo77 2015-09-15
  • 打赏
  • 举报
回复
引用 3 楼 kaven0713 的回复:
我的div可能有2000px以上,我想只显示窗体高度,显示不全的点击上下滑动显示
限定你这个div的高度,在它的css里面加上overflow: auto; 。你这个div里面的内容如果过多的话,会自然把这个div撑开,出现滚动条。
zpjshiwo77 2015-09-15
  • 打赏
  • 举报
回复

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
	<title>JS test</title>
	<script type="text/javascript"> 
   $(document).ready(function(){
      $("#button1").click(function(){
        $(".middle").slideDown("slow");
      });
      $("#button2").click(function(){
        $(".middle").slideUp("slow");
      });
    });
	</script>
	<style type="text/css">
	 body{
   margin: 0px;
   padding: 0xp;
  }
  .top{
    height: 100px;
    width: 200px;
    background-color: red;
  }
  .middle{
    height: 400px;
    width: 200px;
    background-color: yellow;
    overflow: auto;
  }
  .middle li{
    display: block;
  }
	</style>
</head>
<body>
  <div style="width:200px;">
    <div id="button1"class="top"></div>
    <div class="middle">
      <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
      </ul>
    </div>
    <div id="button2" class="top"></div>
  </div>
</body>
</html>
kaven0713 2015-09-15
  • 打赏
  • 举报
回复
我的div可能有2000px以上,我想只显示窗体高度,显示不全的点击上下滑动显示
kaven0713 2015-09-15
  • 打赏
  • 举报
回复
引用 1 楼 zpjshiwo77 的回复:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
	<title>JS test</title>
	<script type="text/javascript"> 
   $(document).ready(function(){
      $("#button1").click(function(){
        $(".middle").slideDown("slow");
      });
      $("#button2").click(function(){
        $(".middle").slideUp("slow");
      });
    });
	</script>
	<style type="text/css">
	 body{
   margin: 0px;
   padding: 0xp;
  }
  .top{
    height: 100px;
    width: 200px;
    background-color: red;
  }
  .middle{
    height: 400px;
    width: 200px;
    background-color: yellow;
  }
	</style>
</head>
<body>
  <div style="width:200px;">
    <div id="button1"class="top"></div>
    <div class="middle"></div>
    <div id="button2" class="top"></div>
  </div>
</body>
</html>
不是这种抽屉效果,是左边菜单过长,需要上下滑动才能展示的完
zpjshiwo77 2015-09-15
  • 打赏
  • 举报
回复

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="jquery-2.1.4.js"></script>
	<title>JS test</title>
	<script type="text/javascript"> 
   $(document).ready(function(){
      $("#button1").click(function(){
        $(".middle").slideDown("slow");
      });
      $("#button2").click(function(){
        $(".middle").slideUp("slow");
      });
    });
	</script>
	<style type="text/css">
	 body{
   margin: 0px;
   padding: 0xp;
  }
  .top{
    height: 100px;
    width: 200px;
    background-color: red;
  }
  .middle{
    height: 400px;
    width: 200px;
    background-color: yellow;
  }
	</style>
</head>
<body>
  <div style="width:200px;">
    <div id="button1"class="top"></div>
    <div class="middle"></div>
    <div id="button2" class="top"></div>
  </div>
</body>
</html>

87,985

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧