Heim >
Web-Frontend >
js-Tutorial >
Von jQuery_jquery implementierter Vorhangeffekt für den Originalbildvergleich
Von jQuery_jquery implementierter Vorhangeffekt für den Originalbildvergleich
WBOY
Freigeben： 2016-05-16 16:44:36
Original
1734 Leute haben es durchsucht
Wirkung: 
HTML-Code:
Code kopieren Der Code lautet wie folgt:
>
>< img alt="" src="js/VFX-after.jpg"> Übergang: alle 0,3 Sekunden, 0 Sekunden; >Code kopieren
Der Code lautet wie folgt:
$(function () {
//Outer DIV
var imageWrap = $('. vfx-image-wrap' ),
//Vordergrundbild >< img alt="" src="js/VFX-after.jpg"> Übergang: alle 0,3 Sekunden, 0 Sekunden; >Code kopieren Der Code lautet wie folgt:
$(function () {
//Outer DIV
var imageWrap = $('. vfx-image-wrap' ),
topImage = $(this).find('.before-image'),
//Trennlinie
divider = $(this ).find('. Divider-Bar'), stayBounce = $('.toggle-function'); imageWrap.on("mousemove", function (e) { / / Das obere Bild und die Trennlinie müssen lokalisiert werden, damit es nur für dieses gilt: var offsets = $(this).offset(), fullWidth = $(this).width(),
mouseX = e.pageX - offsets.left, topImage = $(this).find('.before-image'),
divider = $(this).find('.divider-bar'); >if (mouseX < 0) {
mouseX = 0;
} else if (mouseX > fullWidth) {
mouseX = fullWidth
}
$(this).addClass(' „special“);
stayBounce.click (function(){
$(this).toggleClass('stay');
});
imageWrap.on("mouseleave", function () {
if (! StayBounce.hasClass('Stay')) {
Divider.css({ left: '50%', Transition: 'all .3s' });
topImage.css({ width : '50%', Übergang: 'alle .3s' });
}
});
divider = $(this).find('.divider-bar'); >if (mouseX < 0) {
mouseX = 0;
} else if (mouseX > fullWidth) {
mouseX = fullWidth
}
$(this).addClass(' „special“);
stayBounce.click (function(){
$(this).toggleClass('stay');
});
imageWrap.on("mouseleave", function () {
if (! StayBounce.hasClass('Stay')) {
Divider.css({ left: '50%', Transition: 'all .3s' });
topImage.css({ width : '50%', Übergang: 'alle .3s' });
}
});
Vorheriger Artikel：Zwei Methoden zur Verwendung von jQuery zum Ändern der Farbe von Tabellen in alternativen Zeilen und zum Ändern der Farbe von „mouse_jquery“.
Nächster Artikel：QQ Space Top Folding Tear Effect Beispielcode_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
Aktuelle Ausgaben
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
-
-
-
JAVA-Video-Tutorial für Anfänger2566790 -
-
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Neueste Downloads
Mehr>