实现百度的换一换

Posted 2021-02-10 iwishicould

*{

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();