Posted in Javascript onMay 22, 2012
核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换。
下面这个动画就是显示了尺寸切换,单击“大图”按钮,则改变图片的src,加载大图,单击“小图”按钮,则又显示小图。
replace用法简单讲解:
我其实也是新手,讲得不对望海涵。
字符串.replace(a,b);指的是用b将字符串含有a的部分代替,例如字符串obj="welcome to my website!"; obj.replace("my","3waternet");指的是用字符串3waternet代替字符串obj中的my。
您有兴趣可以使用以下代码做测试:
var obj="welcome to my website!"; var newobj=obj.replace("my","3waternet'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下通过replace字符串替换实现大小图片切换
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@