<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery无限滚动插件</title>
<link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- 此处引用的为下面的 Css 代码 -->
</head>
<style>
body{
font-family: Arial;
}
body,ul,li{
margin:0;
padding:0;
}
ul,li,img{
list-style: none;
}
.title{
width: 100%;
text-align: center;
}
.xbox,.ybox{
overflow: hidden;
margin: 20px auto;
padding: 5px;
border: 2px solid #DDD;
}
.xbox{
width: 500px;
height: 50px;
}
.xbox ul li{
float: left;
margin-right: 5px;
}
.xbox ul li a, .ybox ul li a{
display: block;
width:100px;
height: 50px;
box-shadow: 0 0 40px rgba(0,0,0,0.2) inset;
text-decoration: none;
color: gray;
font-size: 20px;
text-align: center;
line-height: 50px;
}
.ybox{
width: 100px;
height: 250px;
}
.ybox ul li{
margin-bottom: 5px;
}
</style>
<body>
<h3 class="title">jQuery无限滚动插件</h3>
<div class="ybox">
<ul>
<li><a href="#">y</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<script type="text/javascript" src="../lib/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/newscrool.js"></script> <!-- 此处引用的为上面的插件实现代码 -->
<script type="text/javascript">
$(function () {
$(".xbox").scroll(); //默认横向滚动
$(".ybox").scroll({ direction: "y" }); //设置为纵向滚动
});
</script>
</body>
</html>