You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.9 KiB
87 lines
1.9 KiB
3 years ago
|
<!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>
|