.cooperation{
margin: 0 auto;
text-align: center;
}
#icoL{
float:left;
margin-top: 24px;
margin-right: 55px;
width: 50px;
height: 88px;
display: inline-block;
background: url(http://www.jq22.com/img/cs/300x500-1.png) no-repeat;
}
#icoR{
margin-right: 20px;
margin-top: 24px;
float: right;
width: 50px;
height: 88px;
display: inline-block;
background: url(http://www.jq22.com/img/cs/300x500-1.png) no-repeat;
}
li{
list-style:none;
}
.cooperation ul{
display:inline-block;
list-style:none;
padding-left: 0px;
background-color:yellow;
}
.cooperation ul li{
padding:10px 20px 10px 20px;
display: inline-block;
}
.company_city {
margin-top: 30px;
position: relative;
left: 35%;
text-align: center;
font-size: 0;
overflow: hidden;
}
.company_city li + li {
border-left: 0;
}
.company_city li {
float: left;
width: 85px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
border: 1px solid #e8e8e8;
cursor: pointer;
}
.company_city li a{
color:#666;
}
.company_city .on {
color:#f40;
}JS代码中主要写了两个函数,MoveLeft,MoveRight;
在需要滑动切换的区域,按照示例中的HTML代码排列块级元素,然后调用这两个函数就行;
总体的思路是在需要滑动的区域得有两个Div,一个用于放置页面加载时显示的块级元素,一个是隐藏区域用于放置滑动时切换出来的块级区域。
如果出现滑动卡顿等现象,请调试改动HTML代码中Div的width属性,一般这个属性值是根据块级元素的宽度和边距算出来;
最后为了能在“全国”看到所有的公司,JS是在点击事件触发时动态获取下一个应该显示出来的块级元素的,这里需要用到给div和li添加的两个属性,city_abbr 和 sortNum;
city_abbr用来标识,现在应该显示那个地区的显示区;
sortNum是用来排序的,数值越大,那么就越接近当前时间。