1

我有一个页面，上面有一张带有许多缩略图的大图片。当您将鼠标悬停在缩略图上时，主图像将变为您刚刚将鼠标滑过的图像。问题是我拥有的缩略图越多，重复的代码就越多。我怎么能减少它？

Jquery 代码如下。

<script type="text/javascript">  
    $('#thumb1')
.mouseover(function(){  
$('#big_img').fadeOut('slow', function(){  
$('#big_img').attr('src', '0001.jpg');  
$('#big_img').fadeIn('slow');  
            });  
        });  
    $('#thumb2')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', 'p_0002.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb3')  
        .mouseover(function(){  
    $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '_img/p_0003.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
     $('#thumb4')  
        .mouseover(function(){  
            $('#big_img').fadeOut('slow', function(){  
                $('#big_img').attr('src', '0004.jpg');  
                $('#big_img').fadeIn('slow');  
            });  
        });  
</script>

#big_img= 全尺寸图像的 ID

#thumb1, #thumb2, #thumb3, #thumb4= 缩略图的 ID

如果有帮助，该页面的主要代码是 PHP。

4

4 回答 4

3

$(this)是你的朋友。您还需要开发一些可以用来匹配文件名和 id 的命名法。我通常做的是使用 PHP 生成 HTML，但放入处理文件名的特殊属性：

// PHP GeneratedContent

<?php

while(/* some range */) {
    $i = 1;
    $output .= '<element class="thumb" rel="p_' . $i . '.jpg">';
    $i++;
}

echo $output;
?>

然后我将进行下一步：

$('.thumb').mouseover( function() {
    var link = $(this).attr('rel');

    /* Now that you have the link, just put it into whatever function you need to */
});

Fehays 方法确实有效，但这样一来，您就不会有大量不必要的 ID，也不必进行不必要的参数传输。它将使用 class 自动传播到 DOM 中的每个实例thumb。

于 2010-04-02T21:26:02.377 回答
2

你可以写一个我认为的函数。

applyImageFade('#thumb1','0001.jpg');
applyImageFade('#thumb2','p_0002.jpg');
//etc...

function applyImageFade(thumbId, image) {
    $(thumbId).mouseover(function(){
        $('#big_img').fadeOut('slow', function(){
            $('#big_img').attr('src', image);
            $('#big_img').fadeIn('slow');
        });
    });
}
于 2010-04-02T21:20:33.657 回答
2

首先，您应该修改您的代码，以便每个缩略图都有一个易于查找的“类”。

假设你有

<img id="thumb1" scr=""/>
<img id="thumb2" scr=""/>
..

你的 html 应该看起来像

<img id="thumb1" class='thumb' scr=""/>
<img id="thumb2" class='thumb' scr=""/>
..

其次，您应该确保在所有缩略图和它们的大图像对应物之间有一个可识别的模式。在您的代码中，我们有

0001.jpg
p_0002.jpg
_img/p_0003.jpg
0004.jpg

您的文件组织是什么？

现在让我们假设缩略图与错误图像具有相同的 src

jQuery 代码将缩小为：

$('.thumb').mouseover(function(){

    var thumb_src = $(this).attr('src');

    // ==> add code here to transform thumb_src into the big_img src

    $('#big_img').fadeOut('slow', function(){
        $('#big_img').attr('src', thumb_src);
        $('#big_img').fadeIn('slow');
    });
});

这段代码应该可以工作，只是等待将拇指的 src 转换为大图像的 src 的算法

我希望这会帮助你杰罗姆瓦格纳

于 2010-04-02T21:30:21.853 回答
0

我认为您可以做的最干净的事情是扩展 jQuery 以包含您想要的功能：

//random images pulled off of Google Image Search
src1 = "http://www.o3mobi.com/jquery.jpg";
src2 = "http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg";

$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) {
    return this.fadeOut(speedOut, function() {
        $(this).attr('src', src).fadeIn(speedIn, callback);
    });
};

$("#image").click(function () {
    $(this).fadeToSrc(src2, 1000, 4000);
});

你可以在这里测试它！http://jsfiddle.net/jPYyZ/

====== 更新 =======

如果你想做一个鼠标悬停缩略图/预览系统，这就是它所需要的：

//HTML
<img class="thumbnail" src="http://www.o3mobi.com/jquery.jpg">
<img class="thumbnail" src="http://www.bioneural.net/wp-content/uploads/2008/02/jquery.jpg">
<img id="fullsized">


//CSS
​.thumbnail {
    width: 5em;
    height: 5em;
}

#fullsized {
    width: 10em;
    height: 10em;
    border: 2px solid red;
}​


//JAVASCRIPT
$.fn.fadeToSrc = function(src, speedOut, speedIn, callback) {
    return this.fadeOut(speedOut, function() {
        $(this).attr('src', src).fadeIn(speedIn, callback);
    });
};

$(".thumbnail").mouseover(function () {
    var newsrc = $(this).attr("src");
    $("#fullsized").fadeToSrc(newsrc, 1000, 1000);
});

你可以在这里测试/修改这个：http: //jsfiddle.net/AhwH7/

于 2010-04-02T22:02:22.750 回答