大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动

像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采用我如下所讲的大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动。。。

主要运用的技术有jquery easing+jquery scroll

源码见页脚附件 

主要核心知识简单介绍如下所述：

 

在网页内首先要建立几个section 来实现滚动 如下

 

<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>

 简易的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;
}
.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;
}

 实现水平方向的滚动效果 需要如下js代码

$(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();
    });
});

 实现竖直方向的滚动如下js代码

 

$(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();
    });
});

 

 在线演示网站 xianbar.com

   更多内容 请参考我的个人博客 http://ismartstudio.com/