jQuery下通过replace字符串替换实现大小图片切换

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

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

  replace用法简单讲解:

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

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

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

  

复制代码 代码如下:

  var obj="welcome to my website!";

  var newobj=obj.replace("my","net'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