jquery实现当前页面纵向翻页显示特效，点击页面翻页编号即可切换显示，实用的jquery页面切换显示特效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>jquery实现网页纵向翻页切换显示特效_武鸣人</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background: #222;
font-size: 12px;
letter-spacing: 1px;
}
h2.wuming_ren {
font-family: normal Georgia,'Times New Roman',Times,serif;
font-weight: normal;
font-size: 4em;
margin: 0;
padding: 50px 0 20px 50px;
color: #AAA;
}
h2.wuming_ren span {
font-family: normal Georgia,'Times New Roman',Times,serif;
color: #f9f66d;
font-size: 0.9em;
}
h2.wuming_ren small {
color: #555;
display: block;
font-family: normal Verdana,Arial,Helvetica,sans-serif;
font-size: 0.2em;
letter-spacing: 1.0em;
text-transform: uppercase;
padding-left: 5px;
}
/* CONTAINER */
.section {
width: 100%;
height: 4000px;
margin: 0px;
float: left;
font-size: 26px;
}
.section h2 {
margin: 50px 0px 30px 50px;
}
.section p {
width: 950px;
margin: 20px 0px 0px 50px;
}
.section p.link {
font-size: 0.78em;
}
.section p.link a {
color: #3FA4E6;
}
.section p.link a:hover {
color: #2c709c;
text-decoration: none;
}
.black{
color: #fff;
background: #000;
}
.white{
color: #000;
background: #fff;
}
.yellow {
color: #333;
background: #f9f66d;
}
.section ul{
list-style: none;
margin: 20px 0px 0px 550px;
}
.black ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.black ul li a{
display: block;
color: #f0f0f0;
}
.black ul li a:hover{
text-decoration: none;
color: #fff;
}
.white ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.white ul li a{
display: block;
color: #222;
}
.white ul li a:hover{
text-decoration: none;
color: #000;
}
.yellow ul li{
float: left;
padding: 5px;
margin: 5px;
color: #777;
font-size: 1.2em;
}
.yellow ul li a{
display: block;
color: #222;
}
.yellow ul li a:hover{
text-decoration: none;
color: #000;
}
</style>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
<script type="text/javascript" src="/img/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="wrap">
<div id="container-wrap">
<h2 class="wuming_ren">武鸣人 - 需要加载js文件，请刷新后看效果。</h2>
<div class="section black" id="section1">
<h2>武鸣人第一页</h2>
<p>武鸣人，武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，<a href="https://wuming.ren">武鸣人信息资源平台</a></p>
<ul class="nav">
<li>1</li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section white" id="section2">
<h2>武鸣人第二页</h2>
<p>武鸣人，武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，<a href="https://wuming.ren">武鸣人信息资源平台</a></p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li>2</li>
<li><a href="#section3">3</a></li>
</ul>
</div>
<div class="section yellow" id="section3">
<h2>武鸣人第三页</h2>
<p>武鸣人，武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，<a href="https://wuming.ren">武鸣人信息资源平台</a> </p>
<ul class="nav">
<li><a href="#section1">1</a></li>
<li><a href="#section2">2</a></li>
<li>3</li>
</ul>
</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处