Question

我正在尝试在标题元素中完成一些事情。首先，我想将jquery幻灯片设置为相对。其次，我会将我的png徽标和导航链接固定在幻灯片前面。因为有些幻灯片会很暗，有些会很亮，所以我需要使用logo + nav链接来改变设置颜色，因为图像会循环播放，因此可以随时阅读。

到目前为止，似乎我可以通过div循环来完成这两项任务，但由于图像是相对的并且徽标+导航将被修复，我将需要固定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+')');
    });
});

在每张幻灯片上更改字体颜色的幻灯片显示+在回滚时设置颜色的回调字体

1 个答案: