swiper 、css3制作移动端网站,折叠导航
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'
});
});
其实这个项目并没有什么实际上的干活分享,无非给我自己做个懒惰的警醒罢了,代码长时间不去写,就会生疏,基础很重要。
很多时候我总是感觉这个代码不适合我,我对这代码没有多大的兴趣,其实现在感觉也许因为我没有努力学习过的缘故吧,因为这样子发现不了代码的乐趣。工作两年有余了,很快就三年了,度过了新鲜期也该给自己的制定一下计划和目标了,不然就太大了(蓝瘦,香菇)。
swiper 、css3制作移动端网站,折叠导航的更多相关文章
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- 制作移动端手机网站过程中的SEO优化方法技巧
据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手 ...
- 移动端网站的内容触摸滑动-Swiper插件
手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- jquery侧边折叠导航栏制作,两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- 手机移动端网站开发流程HTML5
手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...
- 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)
移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...
随机推荐
- 【转载】Android 内存溢出如何发生的。
[转载]Android 内存溢出如何发生的. 且谈Android内存溢出 前言 关于android的内存溢出在创新文档库中也有不少,网络上也有很多这方面的资料.所以这遍文章不算是正真意义上的创新,仅仅 ...
- 在 CentOS 下手工安装 Docker v1.1x
Docker在 centos 6.x 下面默认最新的版本是1.7, 然而这个并不符合我的实际需求, 尤其我需要 docker-compose 来作为编配工具部署swarm, 所以我只有手工安装了. 首 ...
- wpa_supplicant与kernel交互
wpa_supplicant与kernel交互的操作,一般需要先明确驱动接口,以及用户态和kernel态的接口函数,以此来进行调用操作.这里分为4个步骤讨论. 1.首先需要明确指定的驱动接口.因为有较 ...
- 软工1816 · Alpha冲刺(4/10)
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 完成菜品信息的标定.量化以及整理成csv的任务 接下来的计划 & ...
- 解决android invalid symbol: 'switch'
http://stackoverflow.com/questions/16728178/unable-to-compile-project-in-android-studio-gradle-inval ...
- kmeans算法理解及代码实现
github:kmeans代码实现1.kmeans代码实现2(包含二分k-means) 本文算法均使用python3实现 1 聚类算法 对于"监督学习"(supervised ...
- LR脚本编写时的几个小技巧
参数化空值 如上图所示,当参数化时某个值需要为空值(非空格),直接在参数化文件中空一行/格即可,虽然Parameter List界面上没有显示空的那一行,但并不影响取值. 手工日志跟踪 lr_set_ ...
- 不清楚System.Diagnostics.Process.Start(e.LinkText); 的含义
using System; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms ...
- MySQL中的条件语句
判断学生表中成绩是否小于60,将小于60的学生成绩列为不及格 学生表(student) 字段:姓名(name),学号(主键)(num),性别(sex),成绩(score) select *,if(sc ...
- JAVA IDE IntelliJ IDEA使用简介(二)—之基本操作
一.在编辑器中打开文件 1.可以使用下面的几种方式打开project内的文件进行编辑 (·)在project窗口中双击需要编辑的文件. (·)在project窗口选择需要编辑的文件,按F4 ( ...