Question

感谢您查看我的问题，我会尝试尽可能地解释我需要的内容。

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

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

首先，最重要的是我在中间用于动画的Parallax插件使用jQuery 1.2.6和Hoveralls 1.7.1。如果我更改jQuery版本动画停止工作，并且hoveralls在1.2.6
在我给出的示例中，您可以看到页面向下滑动，但我需要它们在另一个页面打开时关闭。

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

问题：

有没有办法用普通的旧javascript（没有jQuery）做到这一点？我需要控制高度，文本速度效果会很好。
我的网站会慢慢加载，因为这基本上是一个页面吗？页面大部分都很简单，我只会在某些标签和图库中使用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>

但它似乎不起作用。

感谢阅读！

Answer 1

试试这个，但请务必更改对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>

网页的滑动面板

1 个答案: