核心就是使用replace替换img src的图片路径，从而实现不同尺寸图片的切换。

下面这个动画就是显示了尺寸切换，单击“大图”按钮，则改变图片的src，加载大图，单击“小图”按钮，则又显示小图。

replace用法简单讲解：

我其实也是新手，讲得不对望海涵。

字符串.replace(a,b);指的是用b将字符串含有a的部分代替，例如字符串obj="welcome to my website!"; obj.replace("my","jb51net");指的是用字符串jb51net代替字符串obj中的my。

您有兴趣可以使用以下代码做测试：

复制代码 代码如下:

var obj="welcome to my website!";

var newobj=obj.replace("my","jb51net's");

alert(newobj);

好了，就说这么多，更多可以学习的内容在实例页面里。

核心代码:

复制代码 代码如下:

<script type="text/javascript">

$(document).ready(function(){

//给图片高宽转换为以em单位

$(".zxx_image").each(function(){

var emW=$(this).width()/128+"em";

var emH=$(this).height()/128+"em";

$(this).css("width",emW);

$(this).css("height",emH)

});

function srcChg(a,b){

$(".zxx_image").each(function(){

var new_src=$(this).attr("src").replace(a,b); //字符串替换，更改图片路径

//alert(new_src);

$(this).attr("src",new_src);

});

}

$("#small_pic").click(function(){

if($(this).hasClass("on")) return;

else{

$("#big_pic").removeClass("on");

$(this).addClass("on");

$(".zxx_image_list").css("font-size","128px");

srcChg("s256","s128");

return false; //使单击后IE6下图片正常加载

}

});

$("#big_pic").click(function(){

if($(this).hasClass("on")) return;

else{

$("#small_pic").removeClass("on");

$(this).addClass("on");

$(".zxx_image_list").css("font-size","256px");

srcChg("s128","s256");

return false;

}

});

});

</script>

打包下载地址 jquery-replace-pic-convert.rar