实现百度的换一换（一）
作者：互联网
*{
margin: 0;
padding: 0;
}
#maxbox{ width: 405px; height: 400px; margin: 0 auto; } /* 这是标题部分 */ #maxbox .changlink{ width: 405px; height: 40px; line-height:40px; background: pink; }
/*搜索热点部分 */ #maxbox .changlink .searchhot{ display: inline-block; margin-left: 10px; } /* 换一换 */ #maxbox .changlink .change{ text-decoration: none; margin-left: 265px; }
/* 内容区域最大的盒子 设置宽高 超出部分消失 它的高度应该和每一批的高度一致 24*6=144 */ #maxbox .listcontentbox { position: relative; overflow: hidden; width: 405px; height: 144px; } /* li的父级元素ui */ #maxbox .listcontentbox .listcontent{ position: absolute; list-style: none; }
#maxbox .listcontentbox .listcontent>li{ height: 24px; width: 405px; line-height: 24px; background: #ccc; }
#maxbox .listcontentbox .listcontent>li:nth-child(even){ background-color: #E6E6E6 } <!-- 布局=》 一个大的div 中包含2个小的div 一个是标题 一个是内容 内容中有ul 》li
css样似=》 内容区域最大的盒子 设置宽高 超出部分消失 它的高度应该和每一批的高度一致 24*6=144 相对定位 li的父级元素ul绝对定位 li内容区域应该这是行高 和高度
思路： 计算li的父级ui的高度。----》计算现实6个li的高度-----》定义一个索引值，点击按钮，索引值加1----》ul上上移动 if(num==6){ //如果有n批就等于n num=0; }
ul.style.top=-liheight*num+"px"; //这里是ul往上移动，而不是ul的高度往上移动 --> <div id="maxbox"> <!-- 这是标题部分 --> <div class="changlink"> <span class="searchhot">搜索热点</span> <a href="javascript:;" class="change">换一换</a> </div>
<!-- 这是内容部分 --> <div class="listcontentbox"> <ul class="listcontent"> <li>1111111</li> <li>2222222</li> <li>1111111</li> <li>4444444</li> <li>1111111</li> <li>66666666</li> <li>1111111</li> <li>2222sfsfsdf222</li> <li>1111111</li> <li>4444222sfsfsdf444</li> <li>1111111</li> <li>66666666</li> <li>1111111</li> <li>2222222</li> <li>11111sfsf11</li> <li>4444444</li> <li>1111111</li> <li>6666sfs6666</li> <li>1111111</li> <li>22222fsd22</li> <li>1111111</li> <li>4444444</li> <li>1111111</li> <li>66666666</li> <li>1111111</li> <li>22sczfdsfsfdfsdf22222</li> <li>1111111</li> <li>4444444</li> <li>1111sfsf111</li> <li>66666666</li> <li>1111111</li> <li>2222222</li> <li>11111sfsdf11</li> <li>4444444</li> <li>1111111</li> <li>66666666</li> </ul> </div> </div> // css中ul要超出部分就隐藏起来 var changeLinkModule=(function(){
// 计算li的父级ui的高度 var ul=document.querySelector(".listcontent"); var ulheight=ul.offsetHeight; console.log(ulheight); //
// 计算现实6个li的高度 var li=document.querySelector('li'); var liheight=li.offsetHeight * 6; console.log("每一批的高度是"+liheight); //24*6=144 var num=0;// 定义一个索引值 var change= document.querySelector(".change"); //选中按钮
var changelist=function(){ change.addEventListener('click',function(){ // alert("1"); // 这里你打不出来是是因为后面 你没有调用 num++; if(num==6){ //如果有n批就等于n num=0; } ul.style.top=-liheight*num+"px"; //这里是ul往上移动，而不是ul的高度往上移动 }); }; return { huanyihuan:changelist } })(); changeLinkModule.huanyihuan();
#maxbox{ width: 405px; height: 400px; margin: 0 auto; } /* 这是标题部分 */ #maxbox .changlink{ width: 405px; height: 40px; line-height:40px; background: pink; }
/*搜索热点部分 */ #maxbox .changlink .searchhot{ display: inline-block; margin-left: 10px; } /* 换一换 */ #maxbox .changlink .change{ text-decoration: none; margin-left: 265px; }
/* 内容区域最大的盒子 设置宽高 超出部分消失 它的高度应该和每一批的高度一致 24*6=144 */ #maxbox .listcontentbox { position: relative; overflow: hidden; width: 405px; height: 144px; } /* li的父级元素ui */ #maxbox .listcontentbox .listcontent{ position: absolute; list-style: none; }
#maxbox .listcontentbox .listcontent>li{ height: 24px; width: 405px; line-height: 24px; background: #ccc; }
#maxbox .listcontentbox .listcontent>li:nth-child(even){ background-color: #E6E6E6 } <!-- 布局=》 一个大的div 中包含2个小的div 一个是标题 一个是内容 内容中有ul 》li
css样似=》 内容区域最大的盒子 设置宽高 超出部分消失 它的高度应该和每一批的高度一致 24*6=144 相对定位 li的父级元素ul绝对定位 li内容区域应该这是行高 和高度
思路： 计算li的父级ui的高度。----》计算现实6个li的高度-----》定义一个索引值，点击按钮，索引值加1----》ul上上移动 if(num==6){ //如果有n批就等于n num=0; }
ul.style.top=-liheight*num+"px"; //这里是ul往上移动，而不是ul的高度往上移动 --> <div id="maxbox"> <!-- 这是标题部分 --> <div class="changlink"> <span class="searchhot">搜索热点</span> <a href="javascript:;" class="change">换一换</a> </div>
<!-- 这是内容部分 --> <div class="listcontentbox"> <ul class="listcontent"> <li>1111111</li> <li>2222222</li> <li>1111111</li> <li>4444444</li> <li>1111111</li> <li>66666666</li> <li>1111111</li> <li>2222sfsfsdf222</li> <li>1111111</li> <li>4444222sfsfsdf444</li> <li>1111111</li> <li>66666666</li> <li>1111111</li> <li>2222222</li> <li>11111sfsf11</li> <li>4444444</li> <li>1111111</li> <li>6666sfs6666</li> <li>1111111</li> <li>22222fsd22</li> <li>1111111</li> <li>4444444</li> <li>1111111</li> <li>66666666</li> <li>1111111</li> <li>22sczfdsfsfdfsdf22222</li> <li>1111111</li> <li>4444444</li> <li>1111sfsf111</li> <li>66666666</li> <li>1111111</li> <li>2222222</li> <li>11111sfsdf11</li> <li>4444444</li> <li>1111111</li> <li>66666666</li> </ul> </div> </div> // css中ul要超出部分就隐藏起来 var changeLinkModule=(function(){
// 计算li的父级ui的高度 var ul=document.querySelector(".listcontent"); var ulheight=ul.offsetHeight; console.log(ulheight); //
// 计算现实6个li的高度 var li=document.querySelector('li'); var liheight=li.offsetHeight * 6; console.log("每一批的高度是"+liheight); //24*6=144 var num=0;// 定义一个索引值 var change= document.querySelector(".change"); //选中按钮
var changelist=function(){ change.addEventListener('click',function(){ // alert("1"); // 这里你打不出来是是因为后面 你没有调用 num++; if(num==6){ //如果有n批就等于n num=0; } ul.style.top=-liheight*num+"px"; //这里是ul往上移动，而不是ul的高度往上移动 }); }; return { huanyihuan:changelist } })(); changeLinkModule.huanyihuan();
标签：一换,实现,li,ul,num,1111111,var,maxbox,百度 来源： https://www.cnblogs.com/IwishIcould/p/10421280.html