Создание источника переключения img с кроссфейдом в 200 мс с использованием jQuery animate? - PullRequest
Новая
       19

Создание источника переключения img с кроссфейдом в 200 мс с использованием jQuery animate?

1 голос
/ 16 августа 2011

Вот мой соответствующий код, я переключаю изображение в зависимости от того, где я нажимаю.Есть ли способ для меня постепенно переключать изображения?Может оживить их при переключении?Этакий исчезает. 

<script type="text/javascript">
    jQuery(document).ready(function ($) { //fire on DOM ready
        $('#mainproductpicture').addpowerzoom({
            defaultpower: 2,
            powerrange: [2, 5],
            largeimage: null,
            magnifiersize: [200, 200] //<--no comma following last option!
        })

        $('#smallpictureone').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturetwo').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturethree').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturefour').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });

        $('#smallpicturefive').click(function () {
            $("#mainproductpicture").attr("src", $(this).attr("src"));

            $('#mainproductpicture').addpowerzoom({
                defaultpower: 2,
                powerrange: [2, 5],
                largeimage: null,
                magnifiersize: [200, 200] //<--no comma following last option!
            })
        });
    });
</script>

У меня есть еще один связанный вопрос о моем коде JavaScript.Я использую библиотеку Javascript, которую я нашел в Интернете, которая позволяет мне очень хорошо масштабировать изображение.Однако, когда я переключаю src на другое изображение, масштабирование остается на первом.Таким образом, я «подключаю» библиотеку к изображению каждый клик, который я делаю. Имеет ли это отрицательный удар по производительности, о котором я не знаю?Будет ли текущий ген правильно убирать за мной?

Ответы [ 2 ]

5 голосов
/ 16 августа 2011

Вы не можете анимировать атрибут src (я не могу поверить, что я только что написал это).Если вы хотите, чтобы ваши изображения постепенно затухали, вы должны поместить их одно над другим и анимировать непрозрачность верхнего.

Что касается "перехвата" с отрицательным результатом: НетЭто способ, которым Javascript должен использоваться.

4 голосов
/ 16 августа 2011

Только потому, что я сторонник; Вы можете упростить свой код JS, сократив количество повторений кода, используя лучший селектор. Вы можете связать селекторы, используя запятую для их разделения. 

<script type="text/javascript">
jQuery(document).ready(function ($) { //fire on DOM ready
    $('#mainproductpicture').addpowerzoom({
        defaultpower: 2,
        powerrange: [2, 5],
        largeimage: null,
        magnifiersize: [200, 200] //<--no comma following last option!
    })

    $('#smallpictureone, #smallpicturetwo, #smallpicturethree, #smallpicturefour, #smallpicturefive').click(function () {
        $("#mainproductpicture").attr("src", $(this).attr("src"));

        $('#mainproductpicture').addpowerzoom({
            defaultpower: 2,
            powerrange: [2, 5],
            largeimage: null,
            magnifiersize: [200, 200] //<--no comma following last option!
        })
    });
});
</script>

Но вы могли бы сделать еще лучше, вообще не нацеливаясь на эти идентификаторы и используя вместо этого класс. например: 

$('.smallpicture').click(function(){ /* ... */ });

Вы также можете уменьшить количество повторений, предварительно объявив параметры «addpowerzoom» и повторно используя ссылку на переменную. например: 

var powerZoomOpts = {
  defaultpower: 2,
  powerrange: [2, 5],
  largeimage: null,
  magnifiersize: [200, 200]
};

Затем в вашем звонке для инициализации плагина Power Zoom: 

 $('#mainproductpicture').addpowerzoom(powerZoomOpts);

Но подождите! Есть еще кое-что. Вы также можете подключить powerzoom к вызову attr() на линии до этого. например: 

$("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts);

Для окончательного результата: 

<script type="text/javascript">
jQuery(document).ready(function ($) { //fire on DOM ready
    var powerZoomOpts = {
        defaultpower: 2,
        powerrange: [2, 5],
        largeimage: null,
        magnifiersize: [200, 200]
    };

    $('#mainproductpicture').addpowerzoom(powerZoomOpts);

    $('.smallpicture').click(function () {
        $("#mainproductpicture").attr("src", $(this).attr("src")).addpowerzoom(powerZoomOpts);
    });
});
</script>

Разве это не выглядит намного лучше?

Для постепенного исчезновения (как уже говорили) у вас должно быть два img элемента. Один расположен над другим. Нижнее изображение должно начинаться скрыто от просмотра изображением сверху. У него еще не будет атрибута src.

Второй шаг - изменить src нижнего img на изображение, к которому вы хотите перейти изображение. Тогда вы .fadeOut(200) верхнее изображение. Используйте функцию обратного вызова, чтобы изменить атрибут src верхнего изображения на атрибут src нижнего изображения, чтобы "залить" набор изображений для следующего перекрестного затухания.

Вот пример: 

var $topimg = $('#topimage');
var $bottomimg = $('#bottomimage'); /* cache $topimg & $bottomimg jQuery objects for later use */

$('.fadeable-images').click(function(e){
  $bottomimg.attr('src', $(this).attr('src'));
  $topimg.fadeOut(200, function(){
    $topimg.attr('src', $bottomimg.attr('src')).show();
  });
});

Остальное - CSS для выравнивания двух тегов изображения в соответствующих позициях.

...