Несколько изображений исчезают в OnLoad (одновременно) - PullRequest
Новая
       38

Несколько изображений исчезают в OnLoad (одновременно)

0 голосов
/ 25 февраля 2011

Я хочу добавить несколько изображений одновременно с загрузкой страницы. Точно так же, как это делает этот сайт: http://www.struckaxiom.com/work. У меня есть скрипт, чтобы сделать это только на одном изображении, но я хочу, чтобы в него было включено больше изображений. Это единственный сценарий фото. Пожалуйста, помогите. 

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");


function initImage() {
    imageId = 'thephoto'
    image = document.getElementById(imageId);
    setOpacity(image, 0);
    image.style.visibility = "visible";
    fadeIn(imageId,ImageId2,0);
}
function fadeIn(objId, opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 10;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()} 
// -->

</script>

Спасибо!

Ответы [ 3 ]

1 голос
/ 25 февраля 2011

Простой массив и цикл - все, что вам нужно.

Сначала добавьте такой массив поверх кода: 

var images = [ "thephoto1", "thephoto2", "thephoto3" ];

(с идентификатором всех желаемых изображений)

Затем измените имя функции на initImages, чтобы отразить тот факт, что оно будет инициализировать более одного изображения и, наконец, добавить этот цикл: 

function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}

Вот и все, не нужно трогать другие функции.

Тестовый кейс с милыми кошками: http://jsfiddle.net/yahavbr/e863X/: -)

0 голосов
/ 30 августа 2013

Они используют jQuery (отличная реализация).Все изображения находятся в одном и том же контейнере и выбираются с помощью селектора класса jQuery.Затем они исчезают во всех элементах, которые вписываются в видимую область.Их js-файл не свернут, поэтому вы можете перепроектировать большую часть этой функциональности.Важно отметить, что он показывает не все строки за раз, а каждый элемент, который умещается в области просмотра.Их ключевая функция выглядит следующим образом: 

var elTop = $(el).offset().top - $(window).scrollTop();
var elHeight = $(el).height();
// if between top of footer and top of window
if (elTop + elHeight > 40 && elTop < $(window).height()) {

  if ($.inArray($(el).attr("data-unique-id"), elementsInView) < 0) {
    addToView(el);
  }

} else {

  if ($.inArray($(el).attr("data-unique-id"), elementsInView) >= 0) {
    removeFromView(el);
  }

}

addToView и removeFromView добавляют и удаляют элемент из массива, затем для массива выполняется затухание.

0 голосов
/ 25 февраля 2011

Вы можете просто обернуть все свои изображения в один контейнер, например так: 

<div id="imageContainer">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img2.jpg">
</div>

Измените свой CSS на это: 

<style type='text/css'>#imageContainer {visibility:hidden;}</style>

Измените свою первую функцию на это: 

function initImage() {
    containerId = 'imageContainer'
    container = document.getElementById(containerId);
    setOpacity(container, 0);
    container.style.visibility = "visible";
    fadeIn(containerId,0);
}

Запустив эффект затухания для контейнера, вы можете добавить столько содержимого в контейнер, и все это исчезнет вместе, и вам никогда не придется обновлять свой код.

...