swiper 、css3制作移动端网站,折叠导航

前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题让我不知道选用fullpage还是选择swiper来写这个项目。下图就是这个项目完成的效果。

  • 问题1:整屏滑动两个插件都可以用,但是移动端用swiper偏多的
  • 问题2:网站的导航要随着页面更新跳转 这里fullage还是很实用的
  • 问题3:我想用swiper却不是很熟悉swiper怎么制作导航(平时不怎么研究代码的缘故了)

其实每个问题单独拿出来都不难,但是放到一起就有些复杂了,所以书到用时方恨少一点也不假,平时项目少自己也比较懒什么也不努力学习… …  不过最后仔细看了看swiper,虽然没有单独去介绍怎么用swiper写导航但是轮播图的效果理论是一样的,所以就结合JQ实现了这个导航制定跳转的效果,代码如下:

html部分:

<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>

JS部分

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'});
});

其实这个项目并没有什么实际上的干活分享,无非给我自己做个懒惰的警醒罢了,代码长时间不去写,就会生疏,基础很重要。

很多时候我总是感觉这个代码不适合我,我对这代码没有多大的兴趣,其实现在感觉也许因为我没有努力学习过的缘故吧,因为这样子发现不了代码的乐趣。工作两年有余了,很快就三年了,度过了新鲜期也该给自己的制定一下计划和目标了,不然就太大了(蓝瘦,香菇)。

转载于:https://www.cnblogs.com/aliyue/p/7079453.html

swiper 、css3制作移动端网站,折叠导航相关推荐

  1. 推荐15个国外使用 CSS3 制作的漂亮网站

    今天分享的作品集网站有些特别,因为他们都是使用 CSS3 技术制作的.对于设计师来说,为了吸引注意力,作品集必须展示出你的能力,这有点像制作简历,要让人们看到你所擅长的,突出的部分,这是一次推销自己的 ...

  2. 什么样的网站才可以算得上是高端网站设计

    每一个企业都想拥有一个高大上的网站,可以突显企业的品牌形象,给用户留下深刻的印象.那么企业网站如何设计才显得高端呢?高端网站设计有哪些注意事项呢? 一.高端网站设计注意事项 1.高端网站设计重在策划 ...

  3. 高端网站建设css3动画响应式模板_集团网站建设高端网站搭建

    集团网站建设高端网站搭建6.內容分配要有思维逻辑,不一样的商品要开展归类,不一样的文章内容还要开展归类,那样能够更强的让客户掌握到自身的商品,造成大量的熟客,后造成市场销售变换.7.不必应用过多的动画 ...

  4. 制作移动端手机网站过程中的SEO优化方法技巧

    据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...

  5. 2016公众号快速涨粉方法汇总—北京高端网站制作

    2016公众号快速涨粉方法汇总-北京高端网站制作 有流量的地方就有营销,网络推广营销就是去流量大的地方截流,这是永恒不变的,包括现在的自媒体也是在通过自己构建媒体来截流.有流量的地方就有营销,推广营销 ...

  6. 网站改版注意事项—北京高端网站制作

    网站改版注意事项-北京高端网站制作 网站改版无非是为了使自身的站点能更好的吸引访问者,留住访问者,当然提升网站在搜索引擎中的表现也是很重要的,总之网站改版是为了在原有的网站上获得更好的表现. 在网站改 ...

  7. Thinkphp如何制作一个PC网站和移动端网站

    相信大家用thinkphp做一个普通的PC网站应该没什么问题,thinkphp3.2模块化编程,前台模块和后台模块分开的,如何要一个PC网站和移动端网站,只需要复制一个模块就可以了 1,第一种方法,新 ...

  8. Div+CSS、鼠标滑过特效、导航栏效果——简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作

    HTML5+CSS大作业--简洁的个人博客设计(7页) 学生HTML个人网页作业作品下载 个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公 ...

  9. php可以做移动端网站,Thinkphp如何制作一个PC网站和移动端网站

    相信大家用thinkphp做一个普通的PC网站应该没什么问题,thinkphp3.2模块化编程,前台模块和后台模块分开的,如何要一个PC网站和移动端网站,只需要复制一个模块就可以了 1,第一种方法,新 ...

  10. 前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集

    文章目录 HTML结构 一.标签(标记.元素) 二.列表,表格,表单 1.列表 2.图片 3.超链接--实现不同页面的跳转 4.table表格 5.表单1 --收集用户信息给后端input CSS表现 ...

最新文章

  1. linux 网卡配置不一致,linux环境下,双网卡配置不同网段后,路由问题
  2. 设计模式:各个模式间的对比
  3. 手机更新找不到计算机,为什么手机更新换代这么快,电脑的更新却没有这么快呢...
  4. java的传值调用什么_Java的传值调用
  5. 前端学习(2260)高校案例
  6. php 附近的距离,PHP查询附近的人及其距离的实现方法_PHP
  7. springboot 手动提交事务_面试官你都工作3年了,也做过5个项目了,怎么连事务机制都不会...
  8. linux安装软件w,Linux软件安装小结
  9. 大学生程序员被勒索比特币后,绝地反击! | 原力计划
  10. 带你阅读linux内核源码:linux内核源代码编程规范
  11. window环境下Redies安装和服务启用
  12. 怎么用imp命令把dmp文件从本地导入到远处的数据库服务器,Oracle 数据库导入导出dmp文件...
  13. Linux服务器网卡驱动安装及故障排除
  14. 并集、交集、差集、补集的概念是什么?
  15. SpringBoot使用Jib将应用快速打包成Docker镜像
  16. 用Burg法估计AR模型并绘制功率谱曲线的python实现
  17. vim下fcitx优化
  18. 痞子衡嵌入式:盘点国内Cortex-M内核MCU厂商高主频产品(2023)
  19. C语言标准库深度整理
  20. Eclipse配置svn(入门)

热门文章

  1. 什么叫好了伤疤忘了疼?
  2. VRRP(虚拟路由器冗余协议)实操
  3. Exception encountered during context initialization - cancelling refresh attempt:
  4. Error Handling
  5. C++(Qt)软件调试---Qt使用qBreakpad定位崩溃位置(2)
  6. RestTemplate使用gzip压缩调用接口
  7. 用python实现英文字符的词频统计,忽略大小写,以降序的形式输出
  8. Java arcface 2.0 最新版 离线人脸识别SDK
  9. 图书知识图谱的设计与实现
  10. 雅虎邮箱开通POP3协议的方法