Добавление постепенного перехода к javascript img rollover Даниэля Нолана - PullRequest
Новая
       19

Добавление постепенного перехода к javascript img rollover Даниэля Нолана

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

Хорошо, я понял, что есть тонна вещей о выцветании изображений с помощью javascript, но никто из них не делает то, что я хотел бы.

Даниэля Нолана DOES.

Его сценарий позволяет мне просто добавить class=imgover к изображению, и в результате получается отличный обмен изображениями.Все, что мне нужно сделать, это сделать второе изображение и добавить _o в конце имени файла.Это лучший и самый простой способ, который я видел.Мне не нужны причудливые переходы jQuery, и я не хочу добавлять дополнительную разметку в мой CSS, добавляя background изображений.Все, что я хочу, это хороший переход между изображениями. Поверьте мне, я посмотрел несколько jQuery-срезов при смене изображений.

Все срезы jQuery, которые я видел, требуют дополнительной разметки для каждого изображения.У меня есть несколько изображений на моей странице, которые будут нуждаться в обмене изображениями.Большинство интернет-изданий предполагают, что вам нужно только одно изображение на странице, которое нуждается в эффекте.

Как добавить плавный переход в javascript img rollover Даниэля Нолана?Я хотел бы сделать это, если это возможно, но я не могу заставить его работать.

http://www.dnolan.com/code/js/rollover/

Необработанный код

Ответы [ 2 ]

0 голосов
/ 29 февраля 2012

Это лучший способ:

Лучшая реализация замены изображения с помощью javascript / jQuery

У него та же предпосылка сценария Даниэля Нолана, но у него затухание и jQuery.

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

Вы можете сделать что-то подобное с чистым CSS3, без Javascript ...

HTML: 

<div id="container">
    <div id="roll"></div>
    <div id="under"></div>
</div>

CSS: 

#container {
    position:relative;
    width:50px; height:20px;
}
#roll {
    background:url('http://www.dnolan.com/code/js/rollover/rollover.gif');
    cursor:pointer;
    opacity:1;
    width:50px; height:20px;
    position:absolute; z-index:2;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#roll:hover {
    opacity:0;
    transition: all ease 2s;
    -moz-transition: all ease 2s;
    -webkit-transition: all ease 2s;
}
#under {
    background:url('http://www.dnolan.com/code/js/rollover/rollover_o.gif');
    width:50px; height:20px;
    position:absolute; z-index:1;
}

Демо

...