jquery menukar kesan gambar

Dengan populariti Internet mudah alih, gambar telah menjadi salah satu elemen yang sangat diperlukan dalam reka bentuk web. Untuk pemprosesan kesan khas imej, jQuery telah menjadi salah satu alat yang biasa digunakan dalam kalangan pembangun. Artikel ini akan memperkenalkan beberapa teknik dan kaedah untuk menggunakan jQuery untuk mencapai pemprosesan kesan khas imej untuk membantu anda menggunakan sepenuhnya jQuery dalam reka bentuk web.

1. Kesan khas atas tetikus

Kesan khas atas tetikus ialah kaedah pemprosesan imej biasa, yang boleh menghasilkan beberapa kesan dinamik apabila tetikus melepasi imej, seperti membalikkan imej dan virtualisasi imej. Kod berikut boleh membantu anda melaksanakan kesan tuding tetikus mudah:

$('.image').hover(function() {
    $(this).animate({
        opacity: 0.5
    }, 300);
}, function() {
    $(this).animate({
        opacity: 1
    }, 300);
});

Dalam kod di atas, kami menggunakan kaedah tuding dalam jQuery Apabila tetikus melayang, fungsi pertama akan dilaksanakan, iaitu membiarkan imej Ketelusan menjadi 0.5 Apabila tetikus pergi, fungsi kedua dilaksanakan untuk menukar ketelusan imej kepada 1.

2. Kesan penskalaan gambar

Kesan penskalaan gambar membolehkan gambar dizum semasa interaksi pengguna, meningkatkan kesan visual. Kod berikut boleh membantu anda melaksanakan kesan zum ringkas:

$('.image').click(function() {
    $(this).animate({
        width: '150%',
        height: '150%'
    }, 500);
});

Dalam kod di atas, kami menggunakan kaedah klik Apabila pengguna mengklik pada imej, fungsi akan dilaksanakan untuk menukar lebar dan ketinggian imej kepada 150% daripada saiz asal.

3. Kesan karusel gambar

Kesan karusel gambar ialah kaedah yang sering digunakan untuk memaparkan gambar, yang membolehkan berbilang gambar dipaparkan secara bergilir-gilir di kawasan yang sama. Kod berikut boleh membantu anda melaksanakan kesan karusel asas:

var index = 0;
var length = $('.image').length;

setInterval(function() {
    $('.image').eq(index).fadeOut(500);
    index = (index + 1) % length;
    $('.image').eq(index).fadeIn(500);
}, 3000);

Dalam kod di atas, kami menggunakan kaedah setInterval untuk melaksanakan fungsi secara automatik setiap 3 saat. Kaedah eq digunakan dalam fungsi, gambar ke-indeks dipilih, dan ia pudar, dan kemudian indeks dinaikkan sebanyak 1. Selepas memodulasi panjang, gambar seterusnya diperoleh dan pudar.

4. Kesan menyelak gambar

Kesan menyelak gambar membolehkan gambar diterbalikkan semasa interaksi pengguna untuk meningkatkan kesan visual. Kod berikut boleh membantu anda melaksanakan kesan flip mudah:

$('.image').hover(function() {
    $(this).find('.back').stop().rotateY(180);
}, function() {
    $(this).find('.back').stop().rotateY(0);
});

$.fn.rotateY = function(angle) {
    return this.css({
        '-webkit-transform': 'rotateY(' + angle + 'deg)',
        '-moz-transform': 'rotateY(' + angle + 'deg)',
        '-o-transform': 'rotateY(' + angle + 'deg)',
        'transform': 'rotateY(' + angle + 'deg)'
    });
};

Dalam kod di atas, kami menggunakan kaedah hover Apabila pengguna menuding tetikus, gunakan kaedah rotateY untuk membalikkan imej 180 darjah daun tetikus, balikkan. Kaedah rotateY ialah kaedah tersuai yang digunakan untuk mencapai kesan putaran CSS3 dan serasi dalam semua pelayar.

5. Kesan tatal gambar

Kesan tatal gambar boleh terus menatal dan memaparkan gambar di kawasan yang sama, meningkatkan kesan visual. Kod berikut boleh membantu anda melaksanakan kesan menatal asas:

var move = $('.move');
var box = $('.box');

move.html(move.html() + move.html());

var width = $('.move li').width();
var length = $('.move li').length;

box.on('mouseover', function() {
    clearInterval(timer);
});

box.on('mouseout', function() {
    timer = setInterval(show, 3000);
});

var timer = setInterval(show, 3000);

function show() {
    move.animate({
        'marginLeft': -width
    }, 400, function() {
        move.css({
            marginLeft: 0
        }).find('li:first').appendTo(move);
    });
}

Dalam kod di atas, kami mula-mula menyalin imej dan menambahkannya pada jujukan imej asal. Kemudian tetapkan lebar imej melalui CSS. Kemudian gunakan pemasa untuk melaksanakan fungsi pertunjukan setiap 3 saat untuk mengalihkan gambar dan memaparkan gambar seterusnya. Apabila tetikus melayang atau pergi, acara ditetapkan melalui kaedah hidup dan pemasa dibekukan atau diteruskan.

6. Ringkasan

Di atas adalah beberapa teknik dan kaedah asas untuk menggunakan jQuery untuk mencapai pemprosesan kesan khas imej. Walau bagaimanapun, reka bentuk web perlu digunakan secara fleksibel mengikut keadaan sebenar dan kekal inovatif dan diperibadikan untuk menarik pengguna dengan lebih baik dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci jquery menukar kesan gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!