Question

所以对于这个例子，我有一个源图像（image.jpg）和另一个我想在悬停时交换的图像（image-hover.jpg）。

onmouseover事件被触发，但只显示image-hover.jpg不到一秒钟。即使我仍然在图像上方盘旋，它也会快速切换回默认图像（image.jpg）。

为什么会发生这种情况？

jQuery(document).ready(function() {
	
	jQuery(".jig-overflow img").addClass("img-swap");
	
	var aPreLoad = new Array();
	var sTempSrc;
	var aImages = document.getElementsByTagName('img');

	for (var i = 0; i < aImages.length; i++) {		
		if (aImages[i].className == 'img-swap') {
			var src = aImages[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '-hover'+ftype);

			aImages[i].setAttribute('hsrc', hsrc);
			
			aPreLoad[i] = new Image();
			aPreLoad[i].src = hsrc;
			
			aImages[i].onmouseover = function() {
				sTempSrc = this.getAttribute('src');
				this.setAttribute('src', this.getAttribute('hsrc'));
			}
			
			aImages[i].onmouseout = function() {
				if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('-hover'+ftype, ftype);
				this.setAttribute('src', sTempSrc);
			}
		}
	}
});

这是包含元素的div的示例：

<div class="jig-overflow" style="opacity: 1; width: 364px; height: 206px;">
    <a target="_self" href="#" style="cursor: default;" class="jig-loaded">            
        <img src="placeholder.jpg" class="img-swap">
        <div class="jig-overlay-wrapper" style="display: none;">
            <div class="jig-overlay"></div>
        </div>
        <div class="jig-caption-wrapper jig-cw-role-real" style="bottom: auto; top: 87px;">
            <div class="jig-caption" style="display: none;">
                <div class="jig-caption-title">Text Here</div>
            </div>
        </div>
    </a>
</div>

Answer 1

如果我没错，你有两张图片：my-image.png和my-image-hover.png。你也在使用jQuery，所以你可以减少很多代码。

这是我的解决方案

jQuery(function($){ // Shorthand, also means we can use $ from now on, instead of jQuery
    // For every <img> inside something with the class .jig-overflow add the class .img-swap
    $(".jig-overflow img").addClass("img-swap");

    // For each <img> with the class of .img-swap ...
    $("img.img-swap").each(function(){

        // $(this) is the <img> we're currently working with
        var original_src = $(this).attr('src'); // Get original src
        var file_type = original_src.substring(original_src.lastIndexOf('.'), original_src.length); // Get file type
        var hover_src = original_src.replace(file_type, '-hover'+file_type); // Generate hover filename

        // jQuery has a data API which allows us to add HTML5 data to an element. So set the original_src attribute to original_src, and do the same with the hover one
        $(this).data('original_src', original_src);
        $(this).data('hover_src', hover_src);
    });

    // Add mouseover and mouseout event listeners
    $("img.img-swap").on('mouseover', function(){
        $(this).attr('src', $(this).data('hover_src')); // Replace the SRC attbute with the one we set in the data attibute
    });

    $("img.img-swap").on('mouseout', function(){
        $(this).attr('src', $(this).data('original_src')); // Revert it
    });

});

这是一个jsfiddle http://jsfiddle.net/Laazuha5/

jQuery图像悬停交换不工作

1 个答案: