个人中心
gpt4 book ai didi

jquery css 在不同背景的部分之间平滑滚动

转载 作者：行者123 更新时间：2023-11-28 13:41:34 25 4
gpt4 key购买 nike

我正在尝试在页面的各个部分之间进行平滑滚动。基本上我的目标是像这里有类似的效果:http://diablomedia.com/到目前为止:我有菜单，不同的背景，我能够导航，从这里平滑滚动:http://css-tricks.com/snippets/jquery/smooth-scrolling/但是背景有问题...只是...不流畅，我无法解释得更清楚所以我只是粘贴一些我的代码:

<!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=iso-8859-1" />
<title>xxx</title>

<style type="text/css">
html {
    background: #1d1d1d;
}

body {
    margin: 0;
    padding: 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    background: #1d1d1d;
}

h1 {
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
    color: #fff;
    margin: 0;
    text-align: center;
    padding: 5px 0;
}

h1 small {
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.4em;
    display: block;
    color: #ccc;
}

.container {
    width: 100%;
    height: 80px;
    position: fixed;
    margin: 0 0 0 0;
    overflow: hidden;
    top: 0px;
    background: rgba(29, 29, 29, 0.85);
    z-index: 100;
}

.main_content1 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.mega-tapety.info/resize/sztuka-tapety3d-1600-1200-3422.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
    display: block;
}

.main_content2 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.tapety.nja.pl/images/wallpapers/26335506/Widoki/Niebo/17.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content3 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr496/a03b8c70001f8f5d490da42f/pobrano-z-tapety.pinger.pl-29.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content4 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/390_4500_3.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content5 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr448/ca9845940015a295490d848a/pobrano-z-tapety.pinger.pl-1D.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content6 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://i.pinger.pl/pgr188/5b715190002669eb490d8488/pobrano-z-tapety.pinger.pl-1C.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
    position: relative;
}

.main_content7 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background: url("http://skkf.net/pulpity/7tapeta.jpg") no-repeat fixed
        50% 0 #FFFFFF;
    position: relative;
}

.main_content8 {
    width: 100%;
    height: 1200px;
    display: block;
    position: relative;
    background:
        url("http://zdjecia-fotografia.com/wp-content/uploads/2011/01/tapety-na-pulpit-samochody3.jpg")
        no-repeat fixed 50% 0 #FFFFFF;
}

.text_container {
    width: 80%;
    position: absolute;
    margin-left: 10%;
    margin-top: 80px;
}

img {
    border: none;
}

ul#topnav {
    margin: 0 0 0 18%;
    padding: 0;
    list-style: none;
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 60%;
    padding: 0;
}

ul#topnav li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height: 40px;
}

ul#topnav a,ul#topnav span {
    padding: 10px 20px;
    float: left;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    clear: both;
    height: 20px;
    line-height: 20px;
}

ul#topnav a {
    color: #7bc441;
}

ul#topnav span {
    display: none;
}
</style>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document)
            .ready(
                    function() {

                        $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

                        $("#topnav li").each(function() { //For each list item...
                            var linkText = $(this).find("a").html(); //Find the text inside of the a tag
                            $(this).find("span").show().html(linkText); //Add the text in the span tag
                        });

                        $("#topnav li").hover(function() { //On hover...
                            $(this).find("span").stop().animate({
                                marginTop : "-40" //Find the span tag and move it up 40 pixels
                            }, 250);
                        }, function() { //On hover out...
                            $(this).find("span").stop().animate({
                                marginTop : "0" //Move the span back to its original state (0px)
                            }, 250);
                        });

                        function filterPath(string) {
                            return string.replace(/^\//, '').replace(
                                    /(index|default).[a-zA-Z]{3,4}$/, '')
                                    .replace(/\/$/, '');
                        }
                        var locationPath = filterPath(location.pathname);
                        var scrollElem = scrollableElement('html', 'body');

                        $('a[href*=#]')
                                .each(
                                        function() {
                                            var thisPath = filterPath(this.pathname)
                                                    || locationPath;
                                            if (locationPath == thisPath
                                                    && (location.hostname == this.hostname || !this.hostname)
                                                    && this.hash.replace(/#/,
                                                            '')) {
                                                var $target = $(this.hash), target = this.hash;
                                                if (target) {
                                                    var targetOffset = $target
                                                            .offset().top;
                                                    $(this)
                                                            .click(
                                                                    function(
                                                                            event) {
                                                                        event
                                                                                .preventDefault();
                                                                        $(
                                                                                scrollElem)
                                                                                .animate(
                                                                                        {
                                                                                            scrollTop : targetOffset
                                                                                        },
                                                                                        1000,
                                                                                        function() {
                                                                                            location.hash = target;
                                                                                        });
                                                                    });
                                                }
                                            }
                                        });

                        // use the first element that is "scrollable"
                        function scrollableElement(els) {
                            for ( var i = 0, argLength = arguments.length; i < argLength; i++) {
                                var el = arguments[i], $scrollElement = $(el);
                                if ($scrollElement.scrollTop() > 0) {
                                    return el;
                                } else {
                                    $scrollElement.scrollTop(1);
                                    var isScrollable = $scrollElement
                                            .scrollTop() > 0;
                                    $scrollElement.scrollTop(0);
                                    if (isScrollable) {
                                        return el;
                                    }
                                }
                            }
                            return [];
                        }
                    });
</script>
</head>

<body>

    <div class="container">
        <h1>
            <small>Navatar.pl</small>
        </h1>
        <br />
        <ul id="topnav">
            <li><a href="#1">Dojedź szybciej</a>
            </li>
            <li><a href="#2">mCB</a>
            </li>
            <li><a href="#3">Pogadaj ze znajomymi</a>
            </li>
            <li><a href="#4">Check-in</a>
            </li>
            <li><a href="#5">Xplore</a>
            </li>
            <li><a href="#6">About</a>
            </li>
            <li><a href="#7">Cos</a>
            </li>
            <li><a href="#8">Jeszcze</a>
            </li>
        </ul>
    </div>
    <div class="main_content1" id="1"></div>
    <div class="main_content2" id="2"></div>
    <div class="main_content3" id="3"></div>
    <div class="main_content4" id="4"></div>
    <div class="main_content5" id="5"></div>
    <div class="main_content6" id="6"></div>
    <div class="main_content7" id="7"></div>
    <div class="main_content8" id="8"></div>
</body>
</html>

我知道它看起来很糟糕，但我仍在学习:)

最佳答案

well the thing is: open my page, and diablo media page... when you scroll down mine, one background is covered with another, while on their site one background, let say, moves up insted of being covered

这是因为 diablomedia.com 使用了视差滚动效果，允许不同的背景以不同的速度滚动，给人一种你正在谈论的错觉。

这里是教程的链接以及有关此视差滚动技术的更多信息:One page website, vertical parallax

我希望这能满足您的需求。

关于jquery css 在不同背景的部分之间平滑滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7322318/

25 4 0
文章推荐： css - 使用百分比宽度在 Firefox 中效果很好，但在 Chrome 中效果不佳，为什么？
文章推荐： html - 在 float 列表中对齐 div？
文章推荐： HTML5 : rectangle, 填充和边框的反方向渐变
文章推荐： css - 具有固定边距内容容器的流体模板
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com