Adipoli jQuery 图像悬停效果

Adipoli jQuery Image Hover Effects

本文关键字：悬停 图像 jQuery Adipoli      更新时间：2023-09-26

我正在使用Adipoli jQuery图像悬停效果，但是我在更改某些属性时遇到问题。图像变为灰度，鼠标悬停时它变为颜色，但后来我设置了当我单击图像时它应该保持彩色，但它坏了，因为不是替换图像，而是在顶部添加图像并在其上添加另一个图像（但它未定义，因此未显示）。下面是我正在使用的代码，但您可以从 www.filedropper.com/adipoli-test 下载完整的示例

<script type="text/javascript">
$(document).ready(function() {
    $('#image1').adipoli({
        'startEffect' : 'grayscale',
        'hoverEffect' : 'popout'
    });
}); 
function select(n){       
    $('#image1').adipoli({
        'startEffect' : 'normal',
        'hoverEffect' : 'popout'
    });                        
}
</script>
<div style="width:650px; height: 400px; display:block; margin: 60px;">
 <a href="javascript:void(0)" onclick="select(1)"><img src="image1.jpg" class="img1" id="image1"></a>
</div>

我真的很想让这件事发生，我希望一些jQuery专家可以帮助我。

我制作了新的jquery函数"adipoliDestroy"，它从元素中摧毁adipoli。现在在元素上重新初始化adipoli之前，再次调用销毁和初始化adipoli。

(function($){
    $.fn.adipoliDestroy = function(){
        var clone = this.clone().css('display', 'block'),
                wrapper = null;
        if (wrapper = this.parents('.adipoli-wrapper')){
            wrapper.replaceWith(clone);
        }
        return clone;
    }
})(jQuery);
function select(n){
    $('#image1').adipoliDestroy().adipoli({
        'startEffect' : 'normal',
        'hoverEffect' : 'popout'
    });
}
相关文章：