jquery横向平滑全屏滚动特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery横向平滑全屏滚动特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery横向平滑全屏滚动特效</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

    <style>
        a {
            color: #fff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        span.reference {
            position: fixed;
            left: 10px;
            bottom: 10px;
            font-size: 13px;
            font-weight: bold;
        }

        span.reference a {
            color: #fff;
            text-shadow: 1px 1px 1px #000;
            padding-right: 20px;
        }

        span.reference a:hover {
            color: #ddd;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="section black" id="section1">
        <h2>Section 1</h2>
        <p>
            MY Spectre around me night and day
            Like a wild beast guards my way;
            My Emanation far within
            Weeps incessantly for my sin.
        </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>Section 2</h2>
        <p>
            ‘A fathomless and boundless deep,
            There we wander, there we weep;
            On the hungry craving wind
            My Spectre follows thee behind.

        </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 black" id="section3">
        <h2>Section 3</h2>
        <p>
            ‘He scents thy footsteps in the snow
            Wheresoever thou dost go,
            Thro’ the wintry hail and rain.
            When wilt thou return again?

        </p>
        <ul class="nav">
            <li><a href="#section1">1</a></li>
            <li><a href="#section2">2</a></li>
            <li>3</li>
        </ul>
    </div>

    <!-- The JavaScript -->
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('ul.nav a').bind('click', function (event) {
                var $anchor = $(this);
                /*
                if you want to use one of the easing effects:
                $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1500,'easeInOutExpo');
                 */
                $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000);
                event.preventDefault();
            });
        });
    </script>
</body>
</html>

CSS代码(style.css):

*{margin:0;padding:0;}
body{background:#000;font-family:Georgia;font-size:34px;font-style:italic;letter-spacing:-1px;width:12000px;position:absolute;top:0px;left:0px;bottom:0px;color:#FFCC00;}
.section{margin:0px;bottom:0px;width:4000px;float:left;height:100%;text-shadow:1px 1px 2px #f0f0f0;}
.section h2{margin:50px 0px 30px 50px;}
.section p{margin:20px 0px 0px 50px;width:600px;}
.black{color:#fff;background:#000 url(../images/black.jpg) no-repeat top right;}
.white{color:#000;background:#fff url(../images/white.jpg) no-repeat top right;}
.section ul{list-style:none;margin:20px 0px 0px 550px;}
.black ul li{float:left;padding:5px;margin:5px;color:#aaa;}
.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:#aaa;}
.white ul li a{display:block;color:#222;}
.white ul li a:hover{text-decoration:none;color:#000;}

附件:下载该文件资源,减少时间成本(增值服务)