0

我正在尝试在标题元素中完成几件事。首先，我想要一个 jquery 幻灯片设置为相对。其次，我将把我的 png 标志和导航链接固定在幻灯片前面。因为有些幻灯片会很暗，有些会很亮，所以我需要更改徽标 + 导航链接以在图像循环时统一设置颜色，以便始终可以阅读它们。

到目前为止，似乎我可以通过循环遍历 div 来完成这两个任务，但是由于图像是相对的，并且 logo+nav 将是固定的，我需要固定 div 的背景的不透明度来改变它的不透明度0 - 100 向下滚动，幻灯片向上滚动并移出视图。

而且由于 logo+nav 的颜色有时会是一种颜色，有时会是另一种颜色，具体取决于显示的幻灯片，我需要添加一个额外的回调，告诉 logo+nav 在滚动时返回黑色，无论滚动时它们是什么开始了。

我在这里有一个半工作的演示。

此演示显示滚动时的幻灯片 + div 不透明度。由于他们在小提琴中玩得不好，他们在我的实际网站上一起工作得很好。

随意撕开这个。谢谢！

4

1 回答 1

0

这就是你想要的？ http://jsfiddle.net/MNFTT/89/

CSS：

#slideshow{
    
    position:relative;
    top:0;
    left:0;
    
} 

#slideshow ul, #slideshow li{
    
    margin:0;
    padding:0;
    list-style-type:none;
    
} 

.slideshow_item{
    
    position:absolute;
    left:0;
    top:0;
    list-style-type:none;
    
} 

.slideshow_item img{
    
    margin:0;
    padding:0;
    vertical-align:bottom;
    
} 

div.fademe {
    width: 100%; 
    position: fixed; 
    display: block; 
    height: 150px; 
    background: #ffffff; 
    z-index: 8; 
}

#header-wrapper {
    padding: 0;
    margin: 0 auto;
}

#header {
    position: fixed; 
    width: 100%; 
    height: 100px; 
    z-index: 9; 
    margin: 0 auto;
}

#header .inner {
    margin: 0 auto; 
    padding: 0 25px 0 25px; 
    width: 950px; 
    height: 100px; 
    z-index: 10;
}

#header-logo {
    background:url(http://img585.imageshack.us/img585/4227/xlogo.png);
    width:71px;
    height:51px;
    margin: 0 auto;
    margin-top: 31px;
    background-repeat: no-repeat;
}

#navbar {
    text-align: justify;
    margin-top: 25px;
}

#navbar a{
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000000;
}

#navbar a:hover{
    font-family: "ss-bol", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #595959;
}


#navbar span {
    width: 100%;
    display: inline-block;
}

#page {
    width: 100px;
    height: 100%;
}​

HTML

<div id="header-wrapper">
<div class="fademe"></div>
            <div id="header">
        <div class="inner">
            <a href="/" title"logo"><div id="header-logo"></div></a>
            <div id="navbar">
              <a href="#">NEW</a>
              <a href="/shop">SHOP</a>
              <a href="/wine">ART</a>
              <a href="/blog">BLOG</a>
              <a href="#">MUSIC</a>
              <a href="#">CONTACT</a>
            <a href="#">ABOUT</a>
            <span></span></div>
        </div>
        </div>
</div>


<div id="slideshow"> 
    
    <ul>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://img829.imageshack.us/img829/6969/newslide2.jpg" alt="persiannewyear11-hp" /></a> 
            
        </li>
        
        <li class="slideshow_item">
            
            <a href="#"><img src="http://img696.imageshack.us/img696/3193/newslide1.jpg" alt="holi11-hp" /></a> 
            
        </li>
        
    </ul> 
    
</div>
<div id="page">
TEXT FOR SCROLLING
.....
</div>

JS：

/* slideshow */
$(function(){

var slide_pos = 0;
var slide_len = 0;


    slide_len = $(".slideshow_item").size() - 1;

    $(".slideshow_item:gt(0)").hide();

    slide_int = setInterval(function() {

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeOut(2000);

        slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));

        slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
        slide_cur.fadeIn(2000);

    }, 5000);




    var divs = $('.fademe');
    var navbar_a=$('#navbar a');
    var navbar=$('#navbar');
    divs.css('opacity', 0);
    $(window).scroll(function() {
    var imgH=$('.slideshow_item').height();
        var percent = $(document).scrollTop()/imgH;
       divs.css('opacity', percent);
        var bg=Math.round(255-(percent*255));
        bg=bg>0?bg:0;
        var fg=255-(bg/2+128);
       console.log(percent,imgH,fg);
       divs.css('background-color','rgb('+bg+','+bg+','+bg+')');
       navbar_a.css('color','rgb('+fg+','+fg+','+fg+')');
    });
});​
于 2012-10-09T06:46:11.733 回答