发表于: 2017-03-31 22:01:52

1 1346


今天完成的事情:

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

收获:

学习到了垂直轮播怎么实现,协同开发更加熟练了,明天任务将是整个项目的难点,加油!


返回列表 返回列表
评论

    分享到