1

私の質問をご覧いただきありがとうございます。必要なものをできる限り説明します。

これは私のサイトですhttp://hoveralls.design-way.ro/ - ここのようにすべてのページを下にスライドさせたいhttp://example.design-way.ro/ - これを機能させるために Hoveralls を使用しましたコードキャニオンで見つけられるJqueryプラグイン。

うーん...私には2つの問題があります：

  1. まず最も重要なことは、途中のアニメーションに使用した Parallax プラグインが jQuery 1.2.6 で動作し、Hoveralls が 1.7.1 で動作することです。jQuery のバージョンを変更すると、アニメーションが動作しなくなり、1.2.6 で hoveralls が動作しなくなります

  2. 前に示した例では、ページが下にスライドしていることがわかりますが、別のページが開いているときにページを閉じる必要があります。

投稿する前に回答を検索したところ、このjsfiddle.net/fE8ks/26/が見つかりました。HOMEボタンがクリックされ、デフォルトの状態が非表示になったときに、どうにかしてすべてのdivを閉じることができれば、これはうまくいくと思います。

質問:

  1. プレーンな古いjavascript(jQueryなし)でこれを行う方法はありますか? 高さを制御する必要があり、テキストの速度効果が良いでしょう。

  2. これは基本的に 1 つのページであるため、私の Web サイトの読み込みは遅くなりますか?ページはほとんど単純で、いくつかのタブとギャラリーにのみ JS を使用します。

hoveralls の開発者に助けを求めるメールを送信したところ、彼は次のコードをくれました。

// 1. HTML
   a div with id "portfolio_slider"

// GIVE YOUR PORTFOLIO BUTTON AN ID
<a id="porfolio_button">Slide Open Portfolio</a>

// 2. CSS
#portfolio_slider {
     display:none;
     position:absolute;
     width:100%;
     height:auto; // may need to play with this 
     border-bottom:3px solid #CCC;
     top:0px;
     left:0px;
     z-index:99999;
}


// 3. JAVASCRIPT :) 
A. Make sure you load jQuery library
B. Place this after the jQuery library (at the end of the head tag on your index.html)

<script type="text/javascript">
     // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
    $(window).load({   


         // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
        $('#portfolio_button').bind('click',function(e){   

                 // GET THE CURRENT CSS TOP POSITION OF THE PANEL AS AN NUMBER
                 var SliderPos=parseInt( $('#portfolio_slider').css('top'),10);      

                // IF THE PANEL IS OPEN (DOWN)
               if ( SliderPos > 0 ){

                       // ANIMATE THE PORTFOLIO SLIDER PANEL DOWN USING THE CSS TOP PROPERTY
                       // NOTE: IF YOU HAVE JQUERY UI OR THE EASING PLUGIN, YOU CAN CHANGE SWING 
                       $('#portfolio_slider').animate({'top' : '0px'},{duration:500,queue:false,specialeasing:{ 'top' :  'swing' }});


              // IF THE PANEL IS CLOSED (UP)
               }else{

                       // ANIMATE THE PORTFOLIO SLIDER PANEL DOWN USING THE CSS TOP PROPERTY
                       // NOTE: THE TOP POSITION WILL BE EQUAL TO THE HEIGHT OF #PORTFOLIO SLIDER
                       $('#portfolio_slider').animate({'top' : '500px'},{duration:500,queue:false,specialeasing:{ 'top' :  'swing' }});
               };         


       // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
        e.preventDefault();  
        return false;
    });
});
</script>


// ALTERNATIVELY
jQuery makes this stuff easy. Instead of the JS section above, you can alternatively use the following (less control over the animation)
<script type="text/javascript">

     // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
    $(window).load({   
         // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
        $('#portfolio_button').bind('click',function(e){   
            // SLIDE TOGGLE THE DIV
             $('#portfolio_slider').slideToggle(500);           
       // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
        e.preventDefault();  
        return false;
    });
});
</script>

しかし、うまくいかないようです。

読んでくれてありがとう！

4

1 に答える 1

0

これを試してみてください。ただし、ニーズに合わせてjquery.jsファイルへの参照を変更してください...多分Google cdnを使用してください：

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<style type="text/css">
    #portfolio_slider {
         display:none;
         position:absolute;
         width:100%;
         height:auto; // may need to play with this 
         border-bottom:3px solid #CCC;
         top:0px;
         left:0px;
         z-index:99999;
    }
</style>
</head>
<body>
<div id="portfolio_slider"></div>
<a id="portfolio_button">Slide Open Portfolio</a>
<script type="text/javascript">
    // WAIT UNTIL ALL IMAGES ARE LOADED (BETTER THAN DOCUMENT.READY)
    $(function(){   
        // BINDS THE CLICK EVENT TO YOUR PORTFOLIO BUTTON
        $('#portfolio_button').bind('click',function(e){   
            // SLIDE TOGGLE THE DIV
             $('#portfolio_slider').toggle('slideUp');           
            // PREVENTS DEFAULT BEHAVIOR OF BROWSER NAVIGATING TO THE LINK
            e.preventDefault();  
            return false;
        });
    });
</script>
</body>
</html>
于 2012-10-03T00:12:23.970 に答える