核心就是使用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

　　推荐阅读

　　jquery.pagination.js 无刷新分页实现步骤分享

1.使用插件为 jquery.pagination.js ，如果没有这个js文件的话，我可以给发个。 首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。 2.页面js代码为 复制代码 代码如下: <script type=>>>详细阅读

本文标题：jQuery下通过replace字符串替换实现大小图片切换

地址：http://www.17bianji.com/kaifa2/JS/23413.html

 1/2    1