大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动_PHP_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > PHP > 大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动

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

 2013/7/10 2:36:38  guangqiang  程序员俱乐部  我要评论(0)
  • 摘要:像酒店酒吧咖啡店连锁小型餐厅音乐网站等等都可以采用我如下所讲的大气磅礴的网站效果scroll+easing+animation+水平、竖直滚动。。。主要运用的技术有jqueryeasing+jqueryscroll源码见页脚附件主要核心知识简单介绍如下所述:在网页内首先要建立几个section来实现滚动如下<divclass="sectionblack"id="section1"><h2>Section1</h2><p>
  • 标签:网站

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

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

源码见页脚附件?

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

?

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

?

class="html" name="code"><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://www.gqcui.com

  • WebsiteScrolling.zip (123.4 KB)
  • 下载次数: 114
  • jquery-scrollto-plugin-easing-demo.zip (25 KB)
  • 下载次数: 74
发表评论
用户名: 匿名