87,992
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
zpjshiwo77 2015-09-15
- 打赏
- 举报
哥，你没贴代码出来，我作为一个才学了1个星期JS的实习生，感觉要帮你解决这个问题有点难度！
我现在凭空想得话，感觉思路是这样的：你本来应该是定义好了一个height：2000px;的div，然后在里面动态生成了li；你现在可以先定义多个height：500px;的div，然后调用你生成li的JS加一些限定条件，在每个里面只生成一部分。
我只能帮你到这了，剩下的你需要自己解决了~~
kaven0713 2015-09-15
- 打赏
- 举报
思路不错，不过我左边这个菜单是动态生成的，需要计算高度，比如说第一页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
- 打赏
- 举报
限定你这个div的高度，在它的css里面加上overflow: auto; 。你这个div里面的内容如果过多的话，会自然把这个div撑开，出现滚动条。[/quote]
对不起，我表述可能有问题，效果不是点击下面那个滑块把菜单收上去。
我想要的效果是点击上下滑块的时间这个div上下滚动。因为DIV太长了，需要上下滚动才能看的完。
zpjshiwo77 2015-09-15
- 打赏
- 举报
限定你这个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
- 打赏
- 举报
不是这种抽屉效果，是左边菜单过长，需要上下滑动才能展示的完
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>
