我正在尝试重现这个并且它不起作用： http://www.templatemonster.com/demo/44543.html
以下是我的结果：http://webs-it.com/callstar/
我想要的是像我发布的示例一样浏览菜单。我是javascript的新手，我没有设法使它工作。
这是我的代码：
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#block1 {
float:left;
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#block2 {
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#logo {
margin:0 auto;
width:502px;
height:259px;
margin-top:144px;
}
</style>
</head>
<body>
<div id="continut">
<div id="header">
<div id="social">
<a href="" onMouseOver="document.facebook.src='images/social/facebook_roll.png'" onMouseOut="document.facebook.src='images/social/facebook.png'"><img src="images/social/facebook.png" name="facebook" alt="."></a> <a href="" onMouseOver="document.ytube.src='images/social/ytube_roll.png'" onMouseOut="document.ytube.src='images/social/ytube.png'"><img src="images/social/ytube.png" name="ytube" alt="."></a> <a href="" onMouseOver="document.en.src='images/social/en_roll.png'" onMouseOut="document.en.src='images/social/en.png'"><img src="images/social/en.png" name="en" alt="."></a> <a href="" onMouseOver="document.cz.src='images/social/cz_roll.png'" onMouseOut="document.cz.src='images/social/cz.png'"><img src="images/social/cz.png" name="cz" alt="."></a>
</div>
</div>
<div id="block1">test test</div>
<div id="block2">test test</div>
<div id="logo" >
<img src="images/logo/logo_homepg.png">
</div>
<div id="meniu">
<a href="#" onMouseOver="document.about.src='images/meniu/about_roll.png'" onMouseOut="document.about.src='images/meniu/about.png'"><img src="images/meniu/about.png" id="go1" name="about" alt="."></a><a href="#" onMouseOver="document.foto.src='images/meniu/photo_roll.png'" onMouseOut="document.foto.src='images/meniu/photo.png'"><img src="images/meniu/photo.png" name="foto" id="go2" alt="."></a><a href="#" onMouseOver="document.video.src='images/meniu/video_roll.png'" onMouseOut="document.video.src='images/meniu/video.png'"><img src="images/meniu/video.png" id="go3" name="video" alt="."></a><a href="#" onMouseOver="document.ref.src='images/meniu/ref_roll.png'" onMouseOut="document.ref.src='images/meniu/ref.png'"><img src="images/meniu/ref.png" name="ref" id="go4" alt="."></a><a href="#" onMouseOver="document.contact.src='images/meniu/contact_roll.png'" onMouseOut="document.contact.src='images/meniu/contact.png'"><img src="images/meniu/contact.png" name="contact" id="go5" alt="."></a>
</div>
</div>
<div id="footer"></div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate({ margin: "100px 1558px" }, { queue: false, duration: 700 });
});
</script>
</body>
答案 0 :(得分：4)
这是一个有趣的挑战。
我在这里为你创造了类似的效果。
P.S：全部，HTML，CSS和Javascript都是新的。
HTML
<div id="container">
<div id="content">
<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>
</div>
<ul id="nav">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
</ul>
</div>
CSS
*{margin:0; padding:0; font-family: Helvetica}
#container{
width:100%;
height:600px;
overflow:hidden;
float:left;
background: url(http://webs-it.com/callstar/images/covers/electric_guitar2.jpg) center no-repeat;
}
p {
font-size:25px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color:#666;
margin-top:22%;
}
#content {
width:100%;
height:200px;
margin: 50px auto 0;
position:relative;
overflow:hidden;
}
#content > div {
display:block;
width:400px;
height:200px;
background:white;
position:absolute;
margin-left:100%;
/*left:-200px;*/
opacity: 0;,
top:40px
}
#nav {
list-style:none;
display:table;
margin:0 auto;
position:relative;
}
#nav li {
display:table-cell;
align:cen
display:inline-block;
padding:20px
}
#nav a {color:#fff; text-decoration:none;}
JS
$(function() {
var content = $('#content'),
contentHeight = content.height(),
nav = $('#nav'),
count = 0;
// on load content height is shorter
content.height(100);
nav.find('a').on('click', function() {
var $this = $(this),
parent = $this.parent(),
targetElement = $this.attr('href');
//Does the slide down animation once
if (count === 0) {
content.animate({'height': contentHeight }, function() {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
});
count = 1;
} else {
//only add active class if parent does not have it and then animate it
if ( !parent.hasClass('active') ) {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
//Gets older clicked element
var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
}
}
return false;
});
});
如果您有任何问题，请与我们联系。