>
JS コード:
$(function () {
//Outer DIV
var imageWrap = $('. vfx-image-wrap' ),
//前景画像
topImage = $(this).find('.before-image'),
//分割線
divider = $(this ).find('.divider-bar'),
stayBounce = $('.toggle-function');
imageWrap.on("mousemove", function (e) {
/ / これにのみ適用されるように、トップ画像とディバイダーをローカライズする必要があります。
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('特別');
divider.css({ 左: マウス X, 遷移: 'なし' });
topImage.css({ 幅: マウス X, 遷移: 'なし' });
stayBounce.click (function(){
$(this).toggleClass('stay');
});
imageWrap.on("mouseleave", function () {
if (!stayBounce.hasClass('stay')) {
divider.css({ left: '50%'、transition: 'all .3s' }); : '50%'、遷移: 'すべて .3' })
}