0
對於我正在構建的投資組合網站，我有什麼感覺就像是一個簡單的問題。當用戶點擊項目圖像時，隱藏的包含div的頁面應該在頁面頂部滑動，並顯示大圖像和項目描述。除了在單擊任一項目示例項目圖像時，我都可以使用大部分功能，但是大型版本（隱藏圖像和項目說明）都會滑下，即使我在點擊時定位了唯一ID。顯然，我只希望一次顯示一個項目。任何幫助是極大的讚賞。如果發生其他事件，則無法使用onclick定位特定的div
佐伊
http://www.zoeminikes.com/james
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow-images').each(function(){
$(this).cycle({fx:'scrollHorz',
pause: 1,
timeout: 0,
speed: 'fast',
next: $(this).parents('.slideshow-wrap').find('.next'),
prev: $(this).parents('.slideshow-wrap').find('.prev'),
easing: 'easeinout'});
});
$(".btn-close").click(function(){
$('#project-slider').slideToggle('500', 'easeinout');
$('.project-container').removeClass("project-container-active");
return false; //Prevent the browser jump to the link anchor
});
$("#project-slider").hide();
$(".project-container").click(function(){
$.scrollTo('#header', 300, 'easeinout');
$('.project-container').removeClass("project-container-active");
$(this).addClass("project-container-active");
$('#project-slider').slideDown('500', 'easeinout');
return false; //Prevent the browser jump to the link anchor
});
});
</script>
<script type="text/javascript">
function showProject(id){
var project=document.getElementById(id);
project=1;
if(project=='1')
{
project.show();
}
else
{
project.style.display='none';
}
}
</script>
</code><body>
<div id="outerwrap">
<div id="wrap">
<div id="header">
<div id="logo-container">
<div id="logo">
<img src="images/logos/brush-pencil-seal.png" />
</div>
<div id="wordmark">
<a href="index.html"><img src="images/wordmarks/varsity.png" /></a>
</div>
</div>
<div id="nav">
<div id="social-container">
<div class="social-icon" id="social-email">
<a href="mailto:[email protected]?Subject=Hi%20there"><p>email</p></a>
</div>
<div class="social-icon" id="social-facebook">
<a href="https://www.facebook.com/pages/James-Larson/116462605037469" target="_blank"><p>facebook</p></a>
</div>
<div class="social-icon" id="social-behance">
<a href="http://www.behance.net/jameslarson" target="_blank"><p>behance</p></a>
</div>
</div><!--end social-container-->
<div id="all-nav-links">
<div class="nav-link-container" id="portfolio">
<a class="nav-link" id="portfolio-link" href="index.html"><p>PORTFOLIO</p></a>
</div>
<div class="nav-link-container" id="blog">
<a class="nav-link" id="blog-link" href=""><p>BLOG</p></a>
</div>
<div class="nav-link-container" id="windup">
<a class="nav-link" id="windup-link" href=""><p>WIND UP COMICS</p></a>
</div>
<div class="nav-link-container" id="profile">
<a class="nav-link" id="profile-link" href="profile.html"><p>PROFILE</p></a>
</div>
</div>
<div class="new">
</div>
</div><!--end nav-->
</div><!--end header-->
<div id="sawtooth">
</div>
<div id="project-slider">
<div class="project-content" id="windup-content"><?php include("windup.php"); ?></div>
<div class="project-content" id="spill-content"><?php include("spill.php"); ?></div>
</div><!--end project-slider-->
<div id="content">
<div id="projects">
<div class="project-container" id="windup-container"><a href="javascript:; onclick="showProject('windup-content')"></a>
<img src="images/portfolio/thumbs/windup-space.png" />
<div class="caption">
<h1>WIND UP COMICS</h1>
<h2>Pen and ink, digital</h2>
</div>
</a></div>
<div class="project-container" id="spill-container"><a href="javascript:; onclick="showProject()"></a>
<img src="images/portfolio/thumbs/spill.png" />
<div class="caption">
<h1>SPILL</h1>
<h2>Pen and ink, watercolor</h2>
</div>
</a></div>
</div><!--end projects-->
</div><!--end content-->
</div><!--end wrap-->
<div id="footer">
<div id="footer-copy">
<div id="copyright-container">
<p class="footer-text">© Copyright 2011 | James Larson</p>
</div>
<div id="made-container">
<p class="footer-text">Made with love by <a id="zoe-link" href="http://www.zoeminikes.com" target="_blank">Zoe Minikes</a></p>
</div>
</div>
</div>
</div><!--end outerwrap-->
</body>
</html>