jQuery下通過(guò)replace字符串替換實(shí)現(xiàn)大小圖片切換
更新時(shí)間：2012年05月22日 21:16:26 作者：
實(shí)現(xiàn)的效果有點(diǎn)類似于Google picasa相冊(cè)不同尺寸圖片的切換效果。本實(shí)例通過(guò)文字大?。╢ont-size）控制圖片尺寸的做法是跟Google學(xué)習(xí)的，但是jQuery代碼是根據(jù)效果自己想出來(lái)的，邏輯很簡(jiǎn)單，沒(méi)有什么精妙之處
核心就是使用replace替換img src的圖片路徑，從而實(shí)現(xiàn)不同尺寸圖片的切換。
下面這個(gè)動(dòng)畫就是顯示了尺寸切換，單擊“大圖”按鈕，則改變圖片的src，加載大圖，單擊“小圖”按鈕，則又顯示小圖。
replace用法簡(jiǎn)單講解：
我其實(shí)也是新手，講得不對(duì)望海涵。
字符串.replace(a,b);指的是用b將字符串含有a的部分代替，例如字符串obj="welcome to my website!"; obj.replace("my","jb51net");指的是用字符串jb51net代替字符串obj中的my。
您有興趣可以使用以下代碼做測(cè)試：
var obj="welcome to my website!";
var newobj=obj.replace("my","jb51net's");
alert(newobj);
好了，就說(shuō)這么多，更多可以學(xué)習(xí)的內(nèi)容在實(shí)例頁(yè)面里。
核心代碼:
<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
下面這個(gè)動(dòng)畫就是顯示了尺寸切換，單擊“大圖”按鈕，則改變圖片的src，加載大圖，單擊“小圖”按鈕，則又顯示小圖。
replace用法簡(jiǎn)單講解：
我其實(shí)也是新手，講得不對(duì)望海涵。
字符串.replace(a,b);指的是用b將字符串含有a的部分代替，例如字符串obj="welcome to my website!"; obj.replace("my","jb51net");指的是用字符串jb51net代替字符串obj中的my。
您有興趣可以使用以下代碼做測(cè)試：
復(fù)制代碼 代碼如下:
var obj="welcome to my website!";
var newobj=obj.replace("my","jb51net's");
alert(newobj);
好了，就說(shuō)這么多，更多可以學(xué)習(xí)的內(nèi)容在實(shí)例頁(yè)面里。
核心代碼:
復(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)文章
jQueryPad 實(shí)用的jQuery測(cè)試工具(支持IE,chrome,FF)
這個(gè)jQueryPad也是我無(wú)意中在網(wǎng)上看頁(yè)面的時(shí)候看到的，下載下來(lái)試用了下，感覺(jué)很好，這個(gè)軟件是使用WPF開發(fā)的（不過(guò)不開源，需要安裝.NET Framework 3.5），整體界面很簡(jiǎn)潔。2010-05-05
jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了jQuery EasyUI開發(fā)技巧總結(jié)的相關(guān)資料,希望通過(guò)本文大家能夠掌握EasyUI的開發(fā)技巧，需要的朋友可以參考下2017-09-09
今天我介紹一個(gè)輕量級(jí)的插件 boxy!它可以把美工設(shè)計(jì)的彈出框很容易的體現(xiàn)出來(lái)，而且兼容性還不錯(cuò),感興趣的朋友可以了解下2013-01-01
分享2個(gè)jQuery插件--jquery.fileupload與artdialog
這篇文章主要介紹了分享2個(gè)jQuery插件--jquery.fileupload與artdialog的使用方法及示例，非常的實(shí)用，這里推薦給大家。2014-12-12
jquery獲取被勾選的checked(選中)的那一行的3列和4列的值
大家可能會(huì)遇到這種需求通過(guò)jquery獲取被勾選的checked的那一行的3列和4列的值，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
文字浮動(dòng)提示效果想必大家都有見(jiàn)到過(guò)吧,下面為大家詳細(xì)介紹下使用jquery是如何做到的,感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了針對(duì)初學(xué)者的jQuery入門指南,jQuery是當(dāng)下人氣最高的JavaScript庫(kù),需要的朋友可以參考下2015-08-08
JQuery Ajax WebService傳遞參數(shù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JQuery Ajax WebService傳遞參數(shù)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁(yè)面扁平化的普及，越來(lái)越多的網(wǎng)站都開始使用響應(yīng)式布局，作為一個(gè)優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應(yīng)式布局的jQuery插件。2014-11-11