标签：log list upload 时间 end image wip span load
前几天公司要更新改版移动端的官网，由于网站本身没有多少内容，所以设计师就做成了整屏滑动的样子，起初我并没有看设计稿就一口答应了，拿到手后发现了几个问题让我不知道选用fullpage还是选择swiper来写这个项目。下图就是这个项目完成的效果。
其实每个问题单独拿出来都不难，但是放到一起就有些复杂了，所以书到用时方恨少一点也不假，平时项目少自己也比较懒什么也不努力学习… … 不过最后仔细看了看swiper，虽然没有单独去介绍怎么用swiper写导航但是轮播图的效果理论是一样的，所以就结合JQ实现了这个导航制定跳转的效果，代码如下：
<div class="nav"> <span class="logo"> <img src="img/logo_03.png"> </span> <span class="nav_title">首页</span> <span class="nav_btn nav_btn_out"> <img src="img/daohang_06.png" /> </span> </div> <ul class="nav_list"> <li>首页</li> <li>二手房砍价师</li> <li style="display: none;">二手房砍价师</li> <li style="display: none;">二手房砍价师</li> <li>咨询专家</li> <li>联系我们</li> </ul>
var swiper = new Swiper(‘.swiper-container‘, { direction: ‘vertical‘, mousewheelControl : true, onInit: function(swiper){ swiperAnimateCache(swiper); swiperAnimate(swiper); }, onSlideChangeEnd: function(swiper){ swiperAnimate(swiper); $(".nav_title").text($(‘li‘).eq(swiper.activeIndex).html()); //这里是更改标题栏的名字 } });
当点击导航栏的时候
$(‘li‘).click(function(){ swiper.slideTo($(this).index(), 1000) //这里是重要的地方，也是控制了导航指定跳转的代码 $(".nav_title").text($(this).html()); $(".nav_list").animate({ height:‘toggle‘ }); $(".nav_btn").toggleClass("nav_btn_click nav_btn_out"); }); // 这里是控制导航折叠和反转的效果 $(".nav_btn").click(function(){ $(this).toggleClass("nav_btn_click nav_btn_out"); $(".nav_list").animate({ height:‘toggle‘ }); });
其实这个项目并没有什么实际上的干活分享，无非给我自己做个懒惰的警醒罢了，代码长时间不去写，就会生疏，基础很重要。
很多时候我总是感觉这个代码不适合我，我对这代码没有多大的兴趣，其实现在感觉也许因为我没有努力学习过的缘故吧，因为这样子发现不了代码的乐趣。工作两年有余了，很快就三年了，度过了新鲜期也该给自己的制定一下计划和目标了，不然就太大了（蓝瘦，香菇）。
标签：log list upload 时间 end image wip span load
原文地址：http://www.cnblogs.com/aliyue/p/7079453.html
