发表于: 2017-03-31 22:01:52
1 1344
今天完成的事情:
1、优质公司的样式美化
2、优质公司垂直轮播功能
3、找职位首页其他静态页面
明天计划的事情:
明天开始职位搜索这个需求,明天主要完成样式,搜索数据获取以及翻页功能
重点是菜单联动实现
遇到的问题:
1、基于bootstrap的垂直轮播怎么实现?
bootstrap的轮播是水平方向,需要对css样式修改可以将其转化成垂直轮播,可以使用transform-3d折叠成90度,然后就可以轮播了
css关键代码
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-innergai > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.carousel-innergai > .item.next,
.carousel-innergai > .item.active.right {
left: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.carousel-innergai > .item.prev,
.carousel-innergai > .item.active.left {
left: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.carousel-innergai > .item.next.left,
.carousel-innergai > .item.prev.right,
.carousel-innergai > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
html关键代码
<div class="carousel-inner carousel-innergai prof-carousel">
源码链接
http://www.w2bc.com/article/177701
收获:
学习到了垂直轮播怎么实现,协同开发更加熟练了,明天任务将是整个项目的难点,加油!
评论