感谢您查看我的问题，我会尽力解释我需要什么。
这是我的网站 http://hoveralls.design-way.ro/ - 我想让所有页面都像这里一样向下滑动 http://example.design-way.ro/ - 为了完成这项工作，我使用了 Hoveralls Jquery 插件，您可以在 Code canyon 上找到该插件。
嗯...我有两个问题:
首先也是最重要的是，我用于中间动画的 Parallax 插件可与 jQuery 1.2.6 配合使用，而 Hoveralls 则可与 1.7.1 配合使用。如果我更改 jQuery 版本，动画将停止工作并且悬停在 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>
关于javascript - 网站页面的滑动面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12671617/