5

初めてのポスター。私は、コーディングしなければならないWebサイトを設計する過程で、グラフィックデザイナーであると言うことから始めるべきです。私は最小限のjavascript/jqueryの経験があります。Webページ上の場所に基づいて、画像の新しい部分がどのように表示されるかを理解するのに問題があります。

私はスキューバダイビングサイトを設計していて、左側の以下のWebサイトで使用されている深度ロケーターを複製しようとしています。数字だけではなく、各深さの認定レベルに関する情報を入手します。Webページ上の場所に基づいて変更されるテキストまたは画像のいずれかを使用してこれを行う方法に関する提案。

http://lostworldsfairs.com/atlantis/

ありがとう！

4

2 に答える 2

1 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

    var depths = [1500,4000,7000];
    var words = ['shallow','medium','deep','darkness'];

    $(document).ready(function() {

        $(window).scroll(function() {
        var depth = Math.floor($(window).scrollTop());

        for(i in depths){

            if(depth<depths[i]){
            $("#depth-o-meter").html(words[i]);
            break;
            }

        }


        });

    });

</script>

<div style = 'position:fixed' ><span id = 'depth-o-meter' >aaa </span></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

これは、いくつかのテストデータとテスト用のhtmlを含むスクリプトです:)動作します

于 2012-09-04T19:36:15.027 に答える
0

ページのどこにいるかを判断するには、さまざまなスクロール位置の値を利用する必要があります。リンクされた質問には、jQueryでこれらの値を取得するためのいくつかの良いアドバイスがあります

jQueryでウィンドウの高さとスクロール位置を決定するにはどうすればよいですか？

onscrollハンドラーで、コンテンツの変更を次のようにトリガーする必要があります。

$('body').scroll(function() {
    // determine current scroll position
    var scrollPosition = 0;
    // determine position as per linked question

    // change scroll image based on scroll position, assume this image has id of scrollImage
    var scrollImage = $("#scrollImage");
    if (scrollPosition < 100) {
        scrollImage.attr("src", "http://domain.com/path/to/image");
    } else if (scrollPosition < 200) {
        scrollImage.attr("src", "http://domain.com/path/to/another/image");
    } // etc.
});
于 2012-09-04T19:30:19.570 に答える