背景图像的fadeInOut过渡在所有文本中都产生了白色的怪异效果 [英] background image's fadeInOut transitions produces weird effect in white all the texts
问题描述
这个问题有点奇怪,
我有一个网站,其中背景图像随着淡入/淡出过渡而变化
I have a website where the background image changes with a fadeIn/Out transition
视频: http://www.screenr.com/ZCvs
运行中的网络: http://toniweb.us/gm
标记:
<div class="fondo" onclick="descargar(2,500);descargar(1,500);"></div>
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<!-- Inicio Cabecera -->
CSS:
.headerimg {
background-position: center top; background-repeat: no-repeat; width:100%;position:absolute;height:100%;cursor:pointer;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.headerimg img{
min-width:100%; width:100%; height:100%;
}
.fondo{
position:absolute;
z-index:1;
width:100%;
height:100%;
cursor:pointer;
}
JavaScript:
Javascript:
/*Gestion de pase de imágenes de fondo*/
$(document).ready(function() {
/*controla la velocidad de la animación*/
var slideshowSpeed = 3000;
var transitionSpeed = 2000;
var timeoutSpeed = 500;
/*No tocar*/
var interval;
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Si ya estamos navegando, entonces no hacemos nada!
if(animating) {
return;
}
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
// Tenemos dos, uno en el que tenemos la imagen que se ve y otro d?nde tenemos la imagen siguiente
var currentContainer = activeContainer;
// Esto puedo optimizarlo con la funci?n modulo, y cambiar 1 y 2 por 0 y 1-> active = mod2(active + 1)
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
// hay que decrementar el ?ndice porque empieza por cero
cargarImagen(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -1;
var cargarImagen = function(photoObject, currentContainer, activeContainer) {
animating = true;
// Nos aseguramos que el nuevo contenedor está siempre dentro del cajon
currentZindex--;
//if(currentZindex < 0) currentZindex=1;
// Actualizar la imagen
$("#headerimg" + activeContainer).css({
"background-image" : "url(" + photoObject + ")",
"display" : "block",
"z-index" : currentZindex
});
// FadeOut antigua
// Cuando la transición se ha completado, mostramos el header
$("#headerimg" + currentContainer).fadeOut(transitionSpeed,function() {
setTimeout(function() {
$("#headertxt").css({"display" : "block"});
animating = false;
}, timeoutSpeed);
});
};
//ver la primera
navigate("next");
//iniciar temporizador que mostrará las siguientes
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
还有一个叠加div(fondo类)(高度和宽度100%),因此我可以在单击背景时进行检测(我不能直接使用背景div,因为过渡使其具有负的z-index)
there is also an overlay div (class fondo) (height and width 100%) so i can dectect when the background has been clicked (i can not use directly the background div because the transition makes it have negative z-index)
问题是这种过渡会在所有白色文本中产生奇怪的效果
the problem is that this transition produces a weird effect in all white texts
知道我想念什么吗?
推荐答案
我不知道是什么原因导致了您的计算机出现故障,我无法重现它:我使用IE7、8、9,最新的Chrome和Firefox进行了测试在Windows 7上.请向我们提供有关您的设置的更多信息.在测试自己的网站之前,您是否访问过启用3d的网站?好像是图形卡错误.您是否使用了最新的浏览器和图形卡驱动程序?
I don't know what caused the glitches on your computer, I can't reproduce it: I test using IE7,8,9, latest Chrome and Firefox on Windows 7. Please provide us with more information about your setup. Did you visit a 3d-enabled website before testing your own site? It seems like a graphics-card bug. Did you use the latest browser and graphics card drivers?
顺便提一句,您可能要考虑的是使淡入淡出的动画更容易:在初始加载后,Chrome中的内容会变得口吃.
On a side note, something you might want to consider is making your fade animation easier: it stutters a bit in Chrome after initial load.
最简单的动画方法是执行以下代码的window.setInterval:
The easiest animation that can do this thing is a window.setInterval with the following code executing:
function(){
var container = $('#headerimgs');
var current = container.children('div:visible:first');
var next = (current.next().length > 1) ? current.next() : container.children('div:visible');
current.fadeOut(300);
next.fadeIn(300);
}
稍微花一些时间来获得想要的效果.请注意,您需要绝对定位.headerimg div,以便它们完全重叠.
Fiddle a bit with the durations to get the exact effect you want. Note, you'll need to position the .headerimg divs absolutely, so they overlap completely.
这篇关于背景图像的fadeInOut过渡在所有文本中都产生了白色的怪异效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!