本文介绍如何使用jQuery结合JavaScript字符串的replace方法，通过替换图片src路径中的尺寸标识（如s128与s256），实现点击按钮切换大图与小图的动态效果。文章包含基础replace用法示例及完整的jQuery事件处理代码，适用于需要按需加载不同分辨率图片的场景。
jQuery图片尺寸切换原理
核心思路是通过JavaScript字符串的replace方法替换img标签的src属性值，从而动态改变图片路径，实现不同尺寸图片的切换。
以下动画演示了尺寸切换过程：点击“大图”按钮时，程序修改图片src以加载大图；点击“小图”按钮时，则恢复显示小图。
字符串replace方法基础
这里简要讲解一下replace方法的用法：
作为初学者，如有表述不当之处，敬请谅解。
字符串.replace(a, b)的作用是用字符串b替换原字符串中包含子串a的部分。例如，定义字符串obj="welcome to my website!"，执行obj.replace("my", "jb51net")后，原字符串中的"my"将被替换为"jb51net"。
您可以使用以下代码进行简单测试：
代码如下:
var obj="welcome to my website!";
var newobj=obj.replace("my","jb51net's");
alert(newobj);以上就是基本用法，更多详细内容请参考实例页面。
jQuery核心实现代码
核心实现代码如下:
代码如下:
<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