0

小規模な個人用ポートフォリオ サイトを作成する予定です。別の種類のナビゲーションを試してみたかったのです。タッチ デバイスを念頭に置いて、通常のボタン ベースのメニューの代わりに JQuery UI スライダーを使用するのは良い考えのように思えました。

しかし、私はかなり速く立ち往生しました。これは、codrops と hongkiat で見つかったチュートリアルに基づいて、私がこれまでに持っているものです: http://www.insertdisk2.de/stackoverflow/index.html

編集：マックスのおかげで、「アンカージャンプ」をカバーしました。スライダーを使用して、CSS トランジションをトリガーし、ページをナビゲートできるようになりました。どうもありがとう！

スライダーはまだ奇妙に動作します - 私は 4 つまたは 5 つの「状態」を持つことを計画していますが、値/位置を誤って計算しているようで、トリガーが早すぎたり遅すぎたりします。

$(関数() {

        //Store frequently elements in variables
        var slider  = $('#slider'),
            tooltip = $('.tooltip');

        //Hide the Tooltip at first
        tooltip.hide();

        //Call the Slider
        slider.slider({
            //Config
range: "min",
step: 50,
value: 0,

            start: function(event,ui) {
                tooltip.fadeIn('fast');
            },

            //Slider Event
            slide: function(event, ui) { //When the slider is sliding

                var value  = slider.slider('value'),
                    volume = $('.test');

                tooltip.css('right', value).text(ui.value);  //Adjust the tooltip accordingly

                if(value <= 5) { 
                    volume.css('background-color', '#000');
                    window.location.hash = 'home';
                } 
                else if (value == 50) {
                    window.location.hash = 'portfolio';

                } 
                else  {
                    window.location.hash = 'contact';
                };

            },

            stop: function(event,ui) {
                tooltip.fadeOut('fast');
            },
        });

    });
</script>

範囲/値/ステップ、またはスライダーが非常に「混乱」する条件を書いた方法のいずれかだと思います。

4

1 に答える 1

0

スライダーでナビゲーション ボタンの機能を再現したい場合は、ボタンの機能を検討する必要があります。ボタンは位置を変更します。より正確には、 の後のフラグメントを変更します#。URL を変更したいと思った時点で、すでにソリューションに近づいていました。

slideイベントハンドラーで、

window.location.hash = 'home';

これにより、フラグメント識別子がホームに変更され、ボタンをクリックした場合と同じ結果になりHomeます。

于 2013-01-13T19:07:36.957 に答える