1

感谢您查看我的问题，我将尽力解释我需要什么。

这是我的网站http://hoveralls.design-way.ro/ - 我想让所有页面都像这里一样向下滑动http://example.design-way.ro/ - 为了完成这项工作，我使用了 Hoveralls您可以在代码峡谷中找到的 Jquery 插件。

嗯......我有两个问题：

  1. 首先也是最重要的是我用于中间动画的 Parallax 插件与 jQuery 1.2.6 和 Hoveralls 与 1.7.1 一起使用。如果我更改 jQuery 版本动画停止工作并且 hoveralls 在 1.2.6 上不起作用

  2. 在我之前给出的示例中，您可以看到页面向下滑动，但是当另一个页面打开时我需要它们关闭。

在我发布之前，我搜索了一个答案，我发现了这个jsfiddle.net/fE8ks/26/。我认为如果我可以在单击 HOME 按钮时以某种方式关闭所有 div 并且默认状态将被隐藏，这将起作用。

问题：

  1. 有没有办法用普通的旧javascript（没有jQuery）来做到这一点？我需要控制高度，文本速度效果会很好。

  2. 因为这基本上是一页，所以我的网站会加载缓慢吗？页面大多很简单，我只会将 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 回答