麦子学院bootstrap实战项目官网，后台，jquery.singlePageNav.min.js ，wow.min.js，animate.css使用
1.源码笔记
我的源码+笔记（很重要）：链接: https://pan.baidu.com/s/1eSxgLV0 密码: 2pi2
感谢麦子学院项目相关视频：链接: https://pan.baidu.com/s/1eR2qnv0 密码: 8z9x
2.部分页面展示
3. 满意的效果插件
记得导入插件文件
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
$(function(){
/*导航跳转效果插件*/
$('.nav').singlePageNav({
offset:70 /*导航高度*/
});
/*小屏幕导航点击关闭菜单*/
$('.navbar-collapse a').click(function(){
$('.navbar-collapse').collapse('hide');
});
new WOW().init();
})
</script>
jquery.singlePageNav.min.js
wow.min.js和animate.css组合使用
http://daneden.github.io/animate.css/
- js添加 new WOW().init();
- 给使用对象添加class="wow + animate"
效果展示：复制那个animate单词到class需要的即可；animate.css：http://daneden.github.io/animate.css/
- 可用属性
data-wow-duration（动画持续时间）
data-wow-delay（动画延迟时间）
data-wow-offset（偏移量）本动画距离可视区域多远开始执行动画
data-wow-iteration="10"(重复次数)
eg：
<section id="home">
<div class="lvjing">
<div class="container">
<div class="row wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s" "data-wow-offset ="200"
data-wow-iteration="2">
<div class="row wow shake" data-wow-offset ="200" data-wow-iteration="2">
| 【作者】：轻轻走143 |
| 【出处】：http://www.cnblogs.com/qingqingzou-143/ |
| 【声明】：欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！ |
最新文章
- IOS setValue forKey
- 30天C#基础巩固----程序集，反射
- 最长公共子序列 LCS
- GitHub 基本常用知识解答2
- requirejs之demo (转)
- 常用的HTML标签
- 第二步 在D2RQ平台上配置jena环境
- hdu 4445
- IOS--UIPageControl的使用方法详细
- Oracle EBS-SQL (GL-4):从接收追溯到接收事务
- ARP地址解析协议
- Ubuntu启动eclipse问题
- Java 面试知识点解析(五)——网络协议篇
- ipv4网络无访问权限
- 机器学习算法总结(二)——决策树（ID3, C4.5, CART）
- rabbitMQ学习1:消息队列介绍与rabbitmq安装使用
- PID控制器开发笔记之九：基于前馈补偿的PID控制器的实现
- 常见模块(五) random模块
- Git的其他用法
- 单线程实现同时监听多个端口（windows平台c++代码）