欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery下通過replace字符串替換實(shí)現(xiàn)大小圖片切換

 更新時(shí)間：2012年05月22日 21:16:26   作者：  
實(shí)現(xiàn)的效果有點(diǎn)類似于Google picasa相冊不同尺寸圖片的切換效果。本實(shí)例通過文字大小（font-size）控制圖片尺寸的做法是跟Google學(xué)習(xí)的，但是jQuery代碼是根據(jù)效果自己想出來的，邏輯很簡單，沒有什么精妙之處
核心就是使用replace替換img src的圖片路徑，從而實(shí)現(xiàn)不同尺寸圖片的切換。

下面這個(gè)動(dòng)畫就是顯示了尺寸切換，單擊“大圖”按鈕，則改變圖片的src，加載大圖，單擊“小圖”按鈕，則又顯示小圖。

replace用法簡單講解：
我其實(shí)也是新手，講得不對望海涵。
字符串.replace(a,b);指的是用b將字符串含有a的部分代替，例如字符串obj="welcome to my website!"; obj.replace("my","jb51net");指的是用字符串jb51net代替字符串obj中的my。

您有興趣可以使用以下代碼做測試：
復(fù)制代碼 代碼如下:

var obj="welcome to my website!";
var newobj=obj.replace("my","jb51net's");
alert(newobj);

好了，就說這么多，更多可以學(xué)習(xí)的內(nèi)容在實(shí)例頁面里。

核心代碼:
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$(document).ready(function(){
//給圖片高寬轉(zhuǎn)換為以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

相關(guān)文章

最新評(píng)論