感谢您查看我的问题，我将尽力解释我的需求。
这是我的网站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>
但是它似乎不起作用。
谢谢阅读！
最佳答案
尝试此操作，但请确保更改对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>