Comparison of curtain effects with original images implemented by jQuery _ jquery-js tutorial

This article mainly introduces jQuery's original image comparison and curtain effect. If you need it, refer to the following results:

HTML code:

The Code is as follows:

JS Code:

The Code is as follows:

$ (Function (){
// External DIV
Var imageWrap = $ ('. vfx-image-wrapp '),
// Foreground chart
TopImage = $ (this). find ('. before-image '),
// Split line
Pider = $ (this). find ('. pider-bar '),
StayBounce = $ ('. toggle-function ');

ImageWrap. on ("mousemove", function (e ){
// Gotta localize top image and pider so it only applies to this
Var offsets = $ (this). offset (),
FullWidth = $ (this). width (),
MouseX = e. pageX-offsets. left,
TopImage = $ (this). find ('. before-image '),
Pider = $ (this). find ('. pider-bar ');

If (mouseX <0 ){
MouseX = 0;
} Else if (mouseX> fullWidth ){
MouseX = fullWidth
}
$ (This). addClass ('special ');
Pider.css ({left: mouseX, transition: 'none '});
TopImage.css ({width: mouseX, transition: 'none '});
});
StayBounce. click (function (){
$ (This). toggleClass ('stay ');
});

ImageWrap. on ("mouseleave", function (){
If (! StayBounce. hasClass ('stay ')){
Pider.css ({left: '000000', transition: 'All. 3s '});
TopImage.css ({width: '000000', transition: 'All. 3s '});
}
});
});