口碑好的网站设计制作价格淘宝客网站建设任务
目录
一、 jQuery插件
1. 瀑布流插件： jQuery 之家 http://www.htmleaf.com/
2. 图片懒加载： jQuery 插件库 http://www.jq22.com/
3. 全屏滚动
总结不易~ 本章节对我有很大收获，希望对你也是~~~
一、 jQuery插件
jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。
jQuery 插件常用的网站：
- jQuery 插件库 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤：
- 引入相关文件。（jQuery 文件 和 插件文件）
- 复制相关html、css、js (调用插件)。
jQuery 插件演示：
- 瀑布流
- 图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。 注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面 - 全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
1. 瀑布流插件： jQuery 之家 http://www.htmleaf.com/
素材自取：jQueryStudy: jQuery学习仓库 - Gitee.com
查看演示后 直接下载即可！！
下载成功后可以通过index.html来查看样式~ 这里通过查看网页源代码
可以看到，要实现当前效果就要引入别人写好的css、dist、js文件
使用方法：
1. css的引入：
2. JavaScript的引入：
3. html的复制：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用--><link rel="stylesheet" href="./css/main.css"><link href="https://fonts.googleapis.com/css?family=Hind:400,600|Open+Sans:300,600" rel="stylesheet"><link rel="stylesheet" href="./dist/sortable.min.css"><script type="text/javascript" src="./dist/sortable.min.js"></script></head><body><main class="sortable"><div class="container"><div class="wrapper"><ul class="sortable__nav nav"><li><a data-sjslink="all" class="nav__link">All</a></li><li><a data-sjslink="flatty" class="nav__link">Flatty</a></li><li><a data-sjslink="funny" class="nav__link">Funny</a></li></ul><div id="sortable" class="sjs-default"><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-1.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 1</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, eius, asperiores. Incidunt sapienteest quae iure...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-2.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 2</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vitae necessitatibus, doloremsimilique vero explicabo...</p></div></div></div><div data-sjsel="funny"><div class="card"><img class="card__picture" src="./images/item-3.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 3</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, placeat voluptate, fuga tenetur eosducimus animi porro...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-4.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 4</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit doloremque quisquam, obcaecati undenamest quos...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-5.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 5</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse corporis hic minima nisireprehenderit...</p></div></div></div><div data-sjsel="funny"><div class="card"><img class="card__picture" src="./images/item-6.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 6</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus, id, deserunt inventore...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-7.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 7</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum enim beatae vero culpa, fuga, magnisuntdolores nam...</p></div></div></div><div data-sjsel="flatty"><div class="card"><img class="card__picture" src="./images/item-8.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 8</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae numquam, blanditiisnecessitatibus...</p></div></div></div><div data-sjsel="funny"><div class="card"><img class="card__picture" src="./images/item-9.jpg" alt=""><div class="card-infos"><h2 class="card__title">Example 9</h2><p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur adipisci voluptatum laborumofficiis...</p></div></div></div></div></div></div></main><script type="text/javascript">document.querySelector('#sortable').sortablejs()</script>
</body></html>
那么最后不论是标题还是图片都可以自己直接进行切换即可~~~
2. 图片懒加载： jQuery 插件库 http://www.jq22.com/
素材自取：https://gitee.com/liu-yihao-hhh/j-query-study/tree/master/jQuery-03/09-%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD
将压缩版放入文件的js中：
下一步同样是进入index.html 的网页源代码进行复制，但是这里要根据插件规则进行修改：
通过ctrl + h 直接进行将全部图片进行替换！
这个插件的引入， 必须要写道所有的图片的下面
现在就可以实现懒加载效果了！！！
3. 全屏滚动
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/
使用方法
这里就不过多赘述了~
这里有各种选项的配置可以使用：
