JavaScript 图像翻转

JavaScript Image Flip

本文关键字：翻转图像 JavaScript 更新时间：2023-09-26

我有一些运行JavaScript图像翻转的代码，我是JS的新手，我需要在悬停和悬停时翻转图像，如果我将其悬停在悬停上，每次鼠标移动时它都会翻转，而不是在鼠标关闭时。

这是代码：

$(document).ready(function () {
    setInterval(function () {
        $('.sponsorFlip').load('script.js');
        $('.sponsorFlip').load('jquery.flip.min.js');
    }, 30000);
    $('.sponsorFlip').one("mouseenter mouseleave", function () {
        var elem = $(this);
        if (elem.data('flipped')) {
            elem.revertFlip();
            elem.data('flipped', false)
        }
        else {
            elem.flip({
                direction: 'rl',
                speed: 250,
                onBefore: function () {
                    elem.html(elem.siblings('.sponsorData').html());
                }
            });
            elem.data('flipped', true);
        }
    });
    $('.sponsorFlip').bind("click", function () {
        var elem = $(this);
        if (elem.data('flipped')) {
            elem.revertFlip();
            elem.data('flipped', false)
        }
        else {
            elem.flip({
                direction: 'rl',
                speed: 250,
                onBefore: function () {
                    elem.html(elem.siblings('.sponsorData').html());
                }
            });
            elem.data('flipped', true);
        }
    });
});

利用类。 ;)预览 - http://jsfiddle.net/TJZmM/3/

$('div').bind('mouseover mouseout', function(){
    var self = $(this);
    if(self.toggleClass('flipped').hasClass('flipped')) {
        self.html('rl');
    }
    else {
        self.html('lr');
    }
});