<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面元素滚动插件xScroll.js - 【更多源码：www.96flw.com】</title>
<!--css3动画库，必要的-->
<link rel="stylesheet" href="css/animate.min.css">
<!--代码格式样式，可忽略-->
<link rel="stylesheet" href="css/coy.css">
<!--演示布局样式，可忽略-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="header">
<div class="table-cell xScroll" data-animation="rubberBand" style="animation-duration: 1000ms">
<h1>xScroll.js 一款轻量级的元素滚动插件</h1>
<p>使用前请引入 jQuery 和 Animate 库</p>
</div>
</section>
<section class="details">
<h1>配合 <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a> 一起使用</h1>
<div class="row">
<div class="circle concise xScroll" data-animation="fadeIn">
简洁
</div>
<div class="circle convenient xScroll" data-animation="fadeInLeft">
方便
</div>
<div class="circle rapid xScroll" data-animation="fadeInUp">
迅速
</div>
<div class="circle light xScroll" data-animation="fadeInRight">
轻量
</div>
</div>
<div class="doc">
<h2>使用文档:</h2>
<p>1、引入animate.css</p>
<pre><code class="language-css"><link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css"></code></pre>
<p>2、HTML</p>
<pre><code class="language-css"> <div class="xScroll(可以自定义类名)" data-animation="fadeInUp(animate的动画名称)"><div></code></pre>
<p>3、调用</p>
<pre><code class="language-css"><script> $(".xScroll(自己设定的类名)").xScroll(); <script></code></pre>
</div>
</section>
<script src="js/jquery.min.js"></script>
<!--调用插件-->
<script src="js/isScroll.js"></script>
<!--调用方法-->
<script>
$(".xScroll").xScroll();
</script>
<!--代码格式调用-->
<script src="js/prism.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
