層的背景色變綠再變白，并移除”spam”類樣式
最后一行：點(diǎn)擊時(shí)，背景色變紅，并設(shè)置不透明度為”hide”
代碼如下：//don't forget to include the color animations plugin
//$(document).ready(function(){
$(".pane:even").addclass("alt");
$(".pane .btn-delete").click(function(){
alert("this comment will be deleted!");
$(this).parents(".pane").animate({ backgroundcolor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
$(".pane .btn-unapprove").click(function(){
$(this).parents(".pane").animate({ backgroundcolor: "#fff568" }, "fast")
.animate({ backgroundcolor: "#ffffff" }, "slow")
.addclass("spam")
return false;
});
$(".pane .btn-approve").click(function(){
$(this).parents(".pane").animate({ backgroundcolor: "#dafda5" }, "fast")
.animate({ backgroundcolor: "#ffffff" }, "slow")
.removeclass("spam")
return false;
});
$(".pane .btn-spam").click(function(){
$(this).parents(".pane").animate({ backgroundcolor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow")
return false;
});
});
9，圖片展示切換
如果你不想通過頁(yè)面跳轉(zhuǎn)的方式來展示多幅圖片的話，那么這個(gè)例子的方法絕對(duì)是可行的。你可以把jpg圖片加載到一個(gè)target中去(點(diǎn)擊觀看效果)。
圖11
圖片展示切換樣式
工作原理：首先為h2添加一個(gè)空的
。當(dāng)一個(gè)內(nèi)的鏈接被觸發(fā)時(shí)，把href屬性賦給一個(gè)”largepath”變量；把title屬性賦給一個(gè)”largealt”變量；用變量”largepath”替換![]()
的scr屬性；用變量”largealt”替換alt屬性；最后，用變量的largealt（附加在brackets中）設(shè)置h2內(nèi)em內(nèi)容。
代碼如下：$(document).ready(function(){ $("h2").append('')
$(".thumbs a").click(function(){
var largepath = $(this).attr("href");
var largealt = $(this).attr("title");
$("#largeimg").attr({ src: largepath, alt: largealt });
$("h2 em").html(" (" + largealt + ")"); return false;
});
});
10，樣式化不同鏈接類型
對(duì)于大多數(shù)流行的瀏覽器來說，定義不同類型的鏈接樣式是非常容易的。例如，定義一個(gè).pdf格式文件的鏈接樣式，我們可以使用這樣的css規(guī)則實(shí)現(xiàn)：a[href $='.pdf'] { ... }.但不幸的是，ie6并不支持這種定義（這也是我們?yōu)槭裁从憛抜e瀏覽器的一個(gè)原因）。為了實(shí)現(xiàn)瀏覽器間的兼容性，我們可以用jquery實(shí)現(xiàn)(點(diǎn)擊觀看效果)。
圖12 圖片展示切換樣式
工作原理：前三個(gè)鏈接樣式要各自定義實(shí)現(xiàn)，根據(jù)他們的href屬性分別調(diào)用css樣式給各自的；其他的部分，使得所有沒有"http://webdesignerwall.com"和/或在href屬性中不是以”#”開頭的標(biāo)簽，然后添加”external”樣式，并設(shè)置打開target為”_blank”。
代碼如下：$(document).ready(function(){ $("a[@href$=pdf]").addclass("pdf");
$("a[@href$=zip]").addclass("zip");
$("a[@href$=psd]").addclass("psd");
$("a:not([@href*=http://webdesignerwall.com])").not("[href^=#]")
.addclass("external")
.attr({ target: "_blank" });
});
ｐｓ：其實(shí)看到這篇文章好幾天了，只是沒時(shí)間翻譯過來分享。今天弄到了半夜終于搞定了，翻譯比較粗糙，如有錯(cuò)誤瑕疵，請(qǐng)一定指正。翻譯的過程中，學(xué)到了很多東西，加深了我對(duì)jquery的愛。
菠菜博下載：網(wǎng)站設(shè)計(jì)師jquery指南打包下載 原文下載地址
菠菜博demo：點(diǎn)擊瀏覽 原文demo
原文地址：jquery tutorials for designers
中文翻譯：網(wǎng)站設(shè)計(jì)師jquery上手指南
翻譯博客：菠菜博
http://bbon.cn/2008/03/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1%e5%b8%88jquery%e4%b8%8a%e6%89%8b%e6%8c%87%e5%8d%97.html
該文章在 2010/4/27 2:48:12 編輯過
400 186 1886
