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

143 阅读 0 评论 95 点赞

我是靠谱客的博主健壮雨，最近开发中收集的这篇文章主要介绍jQuery下通过replace字符串替换实现大小图片切换，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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