幻燈片顯示每個幻燈片上的字體顏色改變+回滾字體設置滾動的顏色

Question

我想在這裏在頭元素中完成幾件事情。首先，我想要一個jQuery幻燈片設置爲相對。其次，我會將我的PNG徽標和導航鏈接固定在幻燈片前面。由於某些幻燈片會很暗，有些會很亮，因此我需要將徽標+導航鏈接更改爲隨着圖像循環一致地設置顏色，以便始終可以讀取它們。

到目前爲止，我似乎可以通過div來完成這2個任務，但由於圖像是相對的，logo + nav將會被修復，我需要固定div的背景的不透明度來當您向下滾動並且幻燈片向上和向下滾動時，將其從0 - 100變爲不透明度。

而且由於logo + nav的顏色有時會是一種顏色，有時是另一種顏色，這取決於幻燈片顯示的內容，我需要添加一個額外的回調函數，告訴logo + nav在滾動時返回黑色他們是在開始滾動時。我有半工DEMO HERE。

此演示顯示滾動上的幻燈片+ div不透明度。通過他們在小提琴中不是一起打球，他們在我的實際場地上一起工作得很好。

隨意將此撕開。謝謝！

Answer 1

這是你想要的嗎？ 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+')'); 
    }); 
});​