2則自己編寫的jQuery特效分享
先貼代碼吧
<script type="text/javascript">
var msg=["你真?zhèn)ゴ?,"你真漂亮","該吃飯了"];
$(document).ready(function(){
$("#tijiao").click(function(){
$("#p1").html(msg[Math.floor(Math.random() * msg.length)]);
});
});
</script>
這個代碼呢是一個 JQ 的按鈕點擊隨機出現(xiàn)一句話的這么一個功能
要點 就在
$("#p1").html(msg[Math.floor(Math.random() * msg.length)]);
這一句上面。
好了,下一段代碼
<script language="javascript" type="text/javascript">
$(
function() {
$(".content1 ul:gt(0)").hide();
$(".tab li:first").addClass("active");
$(".tab li").css("cursor", "pointer");
$(".tab li").hover(
function(){
$(this).addClass("active").siblings().removeClass("active");
$(".content1 li").eq($(this).index()).siblings().hide().end().show();
}
)
}
);
</script>
這個是一個tab切換的效果
關(guān)鍵點在于
tab選項卡的div塊內(nèi):float浮動一行顯示多個<li>。
下面對應(yīng)的contentdiv塊內(nèi):多個div,
第一個display:block。其余none。
上下div塊內(nèi)元素的數(shù)目和順序保證一致。
后面就對<li>綁定click.
對應(yīng)相對的思路就好了!
好了,今天分享的這2則jQuery特效就先到這里了,以后慢慢分享一些其他特效,希望大家能夠喜歡。
相關(guān)文章
ztree獲取選中節(jié)點時不能進入可視區(qū)域出現(xiàn)BUG如何解決
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。本文給大家介紹ztree獲取選中節(jié)點時不能進入可視區(qū)域出現(xiàn)BUG如何解決的相關(guān)資料,對ztree獲取選中節(jié)點感興趣的朋友一起學(xué)習(xí)吧2015-12-12
jQuery基于事件控制實現(xiàn)點擊顯示內(nèi)容下拉效果
這篇文章主要介紹了jQuery基于事件控制實現(xiàn)點擊顯示內(nèi)容下拉效果,涉及jQuery事件響應(yīng)及元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
使用jQuery向asp.net Mvc傳遞復(fù)雜json數(shù)據(jù)-ModelBinder篇
jQuery提供的ajax方法能很方便的實現(xiàn)客戶端與服務(wù)器的異步交互,在asp.net mvc 框架使用jQuery能很方便地異步獲取提交數(shù)據(jù),給用戶提供更好的體驗!2010-05-05
jQuery插件實現(xiàn)多級聯(lián)動菜單效果
開發(fā)一個jQuery插件實現(xiàn)多級聯(lián)動菜單效果,實現(xiàn)步驟很詳細,感興趣的小伙伴們可以參考一下2015-12-12
jquery Mobile入門—多頁面切換示例學(xué)習(xí)
在JQuery Mobile中,多個頁面的切換是通過<a>元素、并將<href>屬性設(shè)置為#+對應(yīng)的id號的方式進行的2013-01-01

