当前窗口纵向翻页切换显示特效

稿源：互联网 2022-04-02 21:40:51 点击： 1751 撤稿纠错

当前窗口纵向翻页切换显示特效，通过点击页码翻页显示。

以下讨论的是和翻页相关的当前窗口纵向翻页切换显示特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=utf-8">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 个性横向滚动翻页切换特效 站长特效网</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
body {
 background: #222;
 font-size: 12px;
 letter-spacing: 1px;
}
h2.zzjs_net {
 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.zzjs_net span {
 font-family: normal Georgia,'Times New Roman',Times,serif;
 color: #f9f66d;
 font-size: 0.9em;
}
h2.zzjs_net 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_zzjs.js"></script>
<script type="text/javascript" src="http://www.zzjs.net/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();
        });
    });//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<div id="wrap">
    <div id="container-wrap">
    <h2 class="zzjs_net">站长特效网 - 需要加载js文件，请刷新后看效果。</h2>
        <div class="section black" id="section1">
            <h2>站长特效网第一页</h2>
            <p>站长特效网，高质量网页特效代码，广告代码，js特效代码网站！以质量为核心，以实用为目的，<a href="http://zzjs.net">打造一流网页特效站！</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>站长特效网，高质量网页特效代码，广告代码，js特效代码网站！以质量为核心，以实用为目的，<a href="http://zzjs.net">打造一流网页特效站！</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>站长特效网，高质量网页特效代码，广告代码，js特效代码网站！以质量为核心，以实用为目的，<a href="http://zzjs.net">打造一流网页特效站！</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>

关于当前窗口纵向翻页切换显示特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010123066677.shtml方便下次再访问哦。

·上一篇： 当前窗口横向翻页切换显示特效
·下一篇： js控制图层展开与隐藏特效

当前窗口纵向翻页切换显示特效

文章分类LIST >>返回首页

最新游戏

最新新闻