码迷,mamicode.com
首页 > 其他好文 > 详细

实现百度的换一换(一)

时间:2019-02-23 01:08:29      阅读:977      评论:0      收藏:0      [点我收藏+]

标签:最大   索引   console   style   它的   hot   绝对定位   应该   abs   

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

实现百度的换一换(一)

标签:最大   索引   console   style   它的   hot   绝对定位   应该   abs   

原文地址:https://www.cnblogs.com/IwishIcould/p/10421280.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!