幻灯片显示，其中每张幻灯片上的字体颜色均更改，并且回调字体可在滚动条上设置颜色 [英] slideshow with changing font color on each slide + callback font to set color on scroll
问题描述
我正在尝试在header元素中完成几件事.首先，我想将一个jquery幻灯片设置为相对.其次，我将把我的png徽标和导航链接固定在幻灯片的前面.由于某些幻灯片会变暗，有些幻灯片会变浅，因此我需要更改徽标+导航链接以在图像循环时一致地设置颜色，以便始终可以读取它们.
I'm trying to accomplish a couple of things here in a header element. Firstly, I'd like a jquery slideshow set to relative. Secondly, I'll have my png logo and nav links fixed sitting in front of the slideshow. since some of the slides will be dark, and some will be light, I'll need the logo + nav links to change to set colors in unison as the images cycle so they can always be read.
到目前为止，我似乎可以通过div循环来完成这两个任务，但是由于图像是相对的并且logo + nav是固定的，因此我需要固定div的背景不透明才能进行更改向下滚动时幻灯片的透明度为0-100，幻灯片将向上滚动并移出视图.
So far, it seems like I could accomplish these 2 tasks with cycling through divs, but since the images will be relative and the logo+nav will be fixed, I'll need the opacity of the fixed divs' background to change it's opacity from 0 - 100 as you scroll down and the slideshow scrolls up and out of view.
由于徽标+导航的颜色有时会是一种颜色，有时会是另一种颜色，具体取决于正在显示的幻灯片，因此我需要添加一个额外的回调，告诉徽标+导航在滚动时返回黑色，无论它们是什么颜色滚动开始的时间.
And since the colors of the logo+nav will sometimes be one color and sometimes be another depending on what slide is showing, I need to add an additional callback telling the logo+nav to return to black upon scroll no matter what they were when scrolling began.
我有一个半工作的演示在这里.
此演示演示了滚动显示幻灯片+ div不透明度.因为他们在小提琴演奏中表现不佳，所以在我的实际网站上他们表现良好.
This demo shows the slideshow + div opacity on scroll. through they are not playing nice together in the fiddle, they are working fine together on my actual site.
请随意将其拆开.谢谢！
Feel free to tear this apart. Thanks!
推荐答案
这是您想要的吗? 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+')');
});
});
这篇关于幻灯片显示，其中每张幻灯片上的字体颜色均更改，并且回调字体可在滚动条上设置颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
