Welcome, Old Sport!

横向纵向滚动网站的制作 CSS & jQuery

by ilikecss ON 2010/11/03 49130

现在各式各样、稀奇古怪的网站层出不穷,网站也不再局限于标准宽度,长度的设置。国外很多页面都使用了在一个页面里实现横向和纵向的页面跳转,其不为网页设计的新的领域。
在本教程中,我们将创建一个使用 jQuery 简单平滑滚动效果。我们将创建一个水平和垂直网站的布局。我们将使用 jQuery plugins,脚本代码只有区区几行,非常简单。

Step1. 创建HTML

<div class="section black" id="section1">
    <h2>Page 1</h2>
    <p>
        This is page one, I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.
    </p>
    <p class="link">Welcome to <a href="http://ilikecss.com/" target="_blank">Sunflowa Media Website</a></p>
    <p class="link">Link to the <a href="index_vertical.html">index_vertical.html</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>Page 2</h2>
    <p>
        This is page two, I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.
    </p>
    <p class="link">Welcome to <a href="http://ilikecss.com/" target="_blank">Sunflowa Media Website</a></p>
    <p class="link">Link to the <a href="index_vertical.html">index_vertical.html</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>Page 3</h2>
    <p>
        This is page three, I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.
    </p>
    <p class="link">Welcome to <a href="http://ilikecss.com/" target="_blank">Sunflowa Media Website</a></p>
    <p class="link">Link to the <a href="index_vertical.html">index_vertical.html</a></p>
    <ul class="nav">
        <li><a href="#section1">1</a></li>
        <li><a href="#section2">2</a></li>
        <li>3</li>
    </ul>
</div>

Step2. 创建CSS

横向:

body {
background: #222;
font-size: 12px;
letter-spacing: 1px;
width: 12000px;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
}
.section {
width: 4000px;
margin: 0px;
bottom: 0px;
float: left;
height: 100%;
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: #AAA;
background: #000;
}
.white {
color: #333;
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: #DDD;
padding: 0 8px;
}
.black ul li a:hover{
text-decoration: none;
color: #AAA;
}
.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;
}
纵向:
.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;
}

Step3. 插入jQuery和脚本包

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

脚本:

$(function() {
	$('ul.nav a').bind('click',function(event){
		var $anchor = $(this);
		 /*
		 $('html, body').stop().animate({
	scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
		 */ 纵向代码,替换下面
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 1000);
		event.preventDefault();
	});
});

国外作品范例:
peter-pearsondeanoakleyvolltvrdek

43条评论
  1. fioricet infofioricet pregnancy
    Richmond remains first have any depository trust recent faiths hazards.

  2. It is prior that jason failed down a condition.

  3. #3

    valium 10说道:

    angiogram valium
    Edinburgh is accounting to a third regulator of banks and decrees, few of which are financial benefits.

  4. #4

    fioricet tab说道:

    key fioricet,fioricet order,In capital to this, fairground to most privileges is for native on sundays.

  5. No BS and written well, thanks much for the post

  6. #6

    星陨如风说道:

    博主你是中国人还是国际人啊?
    咋全部是英文呢
    俺看的很痛苦呢~~

    • 原本是全英文的网站,但BLOG是后期制作的,考虑到还是以中国用户为主还是使用中文的,博文都是中文的,至于回复者可能来自世界各地~:)

  7. Sweet internet site , super style and design , real clean and apply pleasant.

  8. #8

    Robert White说道:

    I found your blog on yahoo. I think it’s awesome.

  9. I like looking at and I believe this website got some really useful stuff on it! .

  10. Loving the info on this website , you have done great job on the blog posts.

  11. What i find difficult is to find a blog that can capture me for a minute but i think you offer something different. Bravo.

  12. #12

    nbd说道:

    lendingbankbostonstock rates
    Three difficult case societies which are under a gateway emergence were imposed to calculate the verkehrsmuseum, which follows the swap network statements of the deutsches museum.

  13. #13

    Boats Online说道:

    Great info. I previousally to spend alot of my time wakeboarding and watching games. It was probably the best period of my childhood and your content kind of reminded me of that time. Cheers

  14. #14

    Rubin Vigueras说道:

    This blog seems to recieve a large ammount of visitors. How do you get traffic to it? It offers a nice individual twist on things. I guess having something useful or substantial to talk about is the most important thing.

  15. #15

    Boats For Sale说道:

    Great points. I previousally to spend alot of my time water skiing and playing sports. It was quite possible the most memorable sequence of my life and your info kind of brought back us of that period of my life. Thanks

  16. #16

    John878说道:

    Very nice site!

  17. #17

    b0pornm8说道:

    I have been meaning to post something like this on my website and this gave me an idea. Thank you.

  18. #18

    coolest gadget说道:

    Hrmm that was weird, my remark obtained eaten. Anyway I wanted to say that it’s nice to know that someone else also talked about this as I had trouble finding the same data elsewhere. This was the first place that informed me the answer. Thanks.

  19. #19

    HerSolution说道:

    Lengthy ago i run across your site consequently they are already reading along. I think overall I might leave my first comment. I don’t know very well what to express except that I’ve enjoyed reading. Nice blog. Let me keep visiting this blog really often.

  20. #20

    Kristel Orkwis说道:

    I have been reading out a few of your posts and i can state nice stuff. I will make sure to bookmark your website.

  21. Incredible information provided, thank you!

  22. #22

    location salle说道:

    Your place is valueble for me. Thanks!…

  23. #23

    Glynis Gotsche说道:

    I would like to thank you for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now.

  24. #24

    college loan说道:

    Do you people have a facebook fan page? I looked for one on twitter but could not discover one, I would really like to become a fan!

  25. #25

    mutuelle说道:

    Fantastic article! I’ll subscribe correct now wth my feedreader software package!…

  26. WONDERFUL Post.thanks for share..more wait .. ;)…

  27. Oh my goodness! an impressive info man. Thank you Unfortunately I’m experiencing issue with ur RSS . Don’t know why Fail to subscribe. Does anybody experiencing similar rss problem? Anyone who can help please respond. Thnx

  28. An amazing blog post, I just given this onto a workfellow who was doing a little analysis on this. And he in fact purchased me breakfast because I discovered it for him…. smile.. So let me rephrase that: Thanks for the treat! But yeah Thanks for spending the time to talk about this, I feel strongly about it and enjoy reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more info? It is extremely helpful for me. Two thumb up for this blog!

  29. #29

    Gay Video说道:

    Youre so right. Im there with you. Your blog is absolutely worth a read if anyone comes across it. Im lucky I did because now Ive obtained a whole new view of this. I didnt realise that this issue was so important and so universal. You unquestionably put it in perspective for me.

  30. #30

    Ada Mccamey说道:

    You made some nice points there. I did a search on the issue and found most persons will approve with your blog.

  31. #31

    tourim sabah说道:

    Lovely site! I am loving it!! Will be back later to read some more. I am taking your feeds also

  32. #32

    灰灰菜说道:

    我想问下如果想用按钮式的就像Peter Pearson那样的,脚本应该怎么弄啊,好想学~~~

    • 脚本不要变的,就在文字部分把按钮的图片写进CSS里面就可以了。

      • 灰灰菜说道:

        我是重新做的网页,看Peter Pearson那种风格很漂亮,过几天就是恋爱1周年了,想把它改成纪念册的形式,在您的基础上修改改动太大了,害怕时间不够,如果有Peter Pearson的那种源代码或者有个视频教程就好啦…不知道您有没有啊,发现您的网站很有特色啊,很崇拜你~~ :razz:

        • 这个例子不是有下载嘛,你可以把里面稍微修改下就差不多了呀,每个页面放点图片和文字介绍。

        • 你说的按钮也可以从你Peter Pearson利用firebug把图片扣下来用。

          • 灰灰菜说道:

            再次请教下:现在弄差不多了,就是第一个切换到第二个的时候立马过去了没有停顿,而2至3,2至1,3至1会很舒服的速度过去。不知道咋回事?是不是在脚本里挑速度还是css里面呢? :razz:

  33. #33

    Free Point android apps说道:

    thanks for share

  34. #34

    Teachers Day Quotes说道:

    Wonderful goods from you, man. I have understand your stuff previous to and you are just extremely fantastic. I actually like what you have acquired here, certainly like what you’re stating and the way in which you say it. You make it enjoyable and you still care for to keep it sensible. I can not wait to read far more from you. This is actually a tremendous website.




TOP