基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果
更新時(shí)間：2016年11月09日 17:14:54 作者：borogadi
最近基于jQuery和Bootstrap框架實(shí)現(xiàn)了一個(gè)仿知乎動(dòng)態(tài)列表的前端效果，基本實(shí)現(xiàn)了和知乎動(dòng)態(tài)列表相同的效果，下面小編通過(guò)本文給大家分享實(shí)現(xiàn)思路及代碼，對(duì)bootstrap 實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果感興趣的朋友一起看看吧
最近基于jQuery和Bootstrap框架實(shí)現(xiàn)了一個(gè)仿知乎動(dòng)態(tài)列表的前端效果，基本實(shí)現(xiàn)了和知乎動(dòng)態(tài)列表相同的效果。如下：
1.基本列表項(xiàng)
2.列表項(xiàng)全文展開(kāi)、折疊（圖中為展開(kāi)第一項(xiàng)）
3.評(píng)論項(xiàng)展開(kāi)
4.列表數(shù)據(jù)加載（加載全部）
5.帶動(dòng)畫(huà)效果的點(diǎn)贊功能
6.回復(fù)列表的hover顯示功能
HTML代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <link rel="stylesheet" /> <link rel="stylesheet" /> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="scripts/jquery.json.min.js"></script> <link rel="stylesheet" href="styles/main.css" /> <script src="scripts/test.js"></script> </head> <body> <div style="display:none;"> <div id="t_dn" class="dynamic_node"> <meta class="dn_id" content=""/> <meta class="dn_user_id" content=""/> <div class="dn_left"> <div class="dn_user_avatar"><a href=""> <img class="img-thumbnail" src="" /></a> </div> <div class="dn_zannum"> <span></span> </div> <div class="dn_dianzan"> <a href=""><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a> </div> </div> <div class="dn_right"> <div class="dn_title"> <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> <a href=""><span></span></a> </div> <div class="dn_right_top"> <div class="dn_username"> <a href=""><span class="dn_username_name"></span></a> <span class="dn_username_signature"></span> </div> <div class="dn_content_close1"> <a href=""> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> </a> </div> </div> <div class="dn_content"> <a href="" class="dn_content_link"> <span class="dn_content_digest"></span> </a> <span class="dn_content_text"></span> </div> <div class="dn_action"> <div class="dn_content_close2"> <a href=""> <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> </a> </div> <a href=""><span class="dn_action_report">舉報(bào)</span></a> <a href=""><span class="dn_action_share">分享</span></a> <a href=""><span class="dn_action_comm">103條評(píng)論</span></a> <span class="dn_action_time"></span> </div> <div class="dn_comm"> <div class="dn_comm_items"> </div> <div class="dn_comm_showall"> <button id="dn_comm_showall_button" type="button" class="btn btn-default btn-xs">顯示全部評(píng)論</button> </div> <div class="dn_comm_replay"> <div class="dn_comm_replay_field"> <textarea class="form-control" rows="2" placeholder="寫(xiě)下你的評(píng)論..."></textarea> </div> <div class="dn_comm_replay_buttoms"> <button type="button" class="btn btn-primary btn-sm">評(píng)論</button> <a href="" class="dn_comm_replay_buttoms_cancel">取消</a> </div> </div> </div> </div> </div> <div id="t_dn_comm" class="dn_comm_item"> <meta class="dn_comm_id" content=""> <div class="dn_comm_item_left"> <div> <a href="#"><img class="img-rounded" src="images/user.png" /> </a> </div> </div> <div class="dn_comm_item_mid"> <div class="dn_comm_item_middle_username"> <a href="#"><span>用戶名</span></a> </div> <div class="dn_comm_item_mid_content"> <span></span> </div> <div class="dn_comm_foot"> <div class="dn_comm_foot_left"> <span>2015-09-08 12:00:09</span> </div> <div class="dn_comm_item_mid_action"> <a href="#"><span>回復(fù)</span></a> <a href="#"><span>舉報(bào)</span></a> </div> </div> </div> <div class="dn_comm_item_right"> <div class="dn_comm_zannum"> <span>5</span> </div> <div class="dn_comm_dianzan"> <a href="#"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> </a> </div> </div> </div> </div> <div class="global"> <div class="list_layout"> </div> <div class="load_flag"> <button id="load_flag_button" type="button" class="btn btn-default btn-s">加載更多</button> <div id="load_flag_info"><small>沒(méi)有更多了 ！</small></div> </div> </div> </body> </html>
css文件代碼如下（main.css）：
<style>
/* global navigadion */
.nav{
width:100%;
height:3.5em;
padding-top:0em;
vertical-align:middle;
background-image: -moz-linear-gradient(top, #99FFFF, #FFFFFF);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #99FFFF), color-stop(1, #FFFFFF));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99FFFF', endColorstr='#FFFFFF', GradientType='0');
}
.nav-content{
width:1024px;
margin-left: auto;
margin-right: auto;
}
#nav_user_name,#nav_user_avatar,#nav_btn_notice,#nav_btn_discuss,#nav_btn_read,#nav_btn_index,#nav_search_text,#nav_search_text{
margin-top:0.5em;
}
.brand{
font-size:2.5em;
font-weight:lighter;
color:#5e5e5e;
font-family: "Microsoft JhengHei"! important;
}
.avatar img{
padding:0.2em;
}
#notice_num{
visibility:visible;
backgroung-color:red;
color:white;
width: 1.6em;
height: 1.6em;
background: red;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
position:fixed;
}
#nav_user_name{
float:right;
}
#nav_user_avatar{
float:right;
}
.content{
width:1024px;
margin-left: auto;
margin-right: auto;
}
.left{
float:left;
width:100%;
}
.right{
background-color:white;
float:left;
width:100%;
}
.foot{
float:left;
}
.foot span{
font-size:0.8em;
font-weight:lighter;
}
.dashed-line{
border-bottom:1px dashed;
border-bottom-color:#C9C9C9;
}
/*##############################################*/
/* dynamic list */
.dynamic_node{
width:100%;
border-top:1px solid #eee;
padding-bottom:1em;
padding-top:1em;
float:left;
}
.dn_left{
width:50px;
float:left;
}
.dn_left img{
width:50px;
height:50px;
}
.dn_dianzan,.dn_zannum{
width:100%;
float:left;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.dn_right{
padding-left:1em;
width:666px;
float:left;
}
.dn_title label{
font-weight:lighter;
color:#6b6b6b;
}
.dn_title a span{
color:#259;
font-weight:bold;
}
.dn_username_name{
font-weight:bold;
font-size:0.8em;
color:#259;
}
.dn_username_signature{
font-size:0.8em;
}
.dn_action{
float:right;
}
.dn_action span{
float:right;
margin-left:1em;
margin-top:1em;
font-size:0.8em;
}
.dn_content_digest,.dn_content_text{
float:left;
font-size:0.8em;
color:#363636;
width:100%;
}
.dn_content_text{
display:none;
}
.dn_content_close1,.dn_content_close2{
float:right;
display:none;
font-size:1em;
}
.dn_action{
display:none;
float:right;
}
.dn_comm{
float:left;
width:100%;
display:none;
}
.dn_comm_items{
float:left;
width:100%;
}
.dn_comm_item{
float:left;
margin-top:0.8em;
border-top:1px solid #eee;
padding-top:0.8em;
}
.dn_comm_item_left{
width:50px;
float:left;
}
.dn_comm_item_mid{
width:560px;
float:left;
}
.dn_right_top{
width:100%;
float:left;
}
.dn_comm_item_right{
width:30px;
float:right;
text-align:center;
}
.dn_comm_item_left img{
width:30px;
height:30px;
}
.dn_comm_item_middle_username,.dn_comm_item_mid_content,.dn_comm_item_mid_time{
float:left;
font-size:0.8em;
}
.dn_comm_item_mid_action{
float:right;
margin-left:1em;
font-size:0.8em;
display:none;
}
.dn_comm_item_mid_action span{
margin-left:1em;
}
.dn_comm_dianzan{
font-size:1em;
width:100%;
margin-left:auto;
margin-right:auto;
}
.dn_comm_zannum{
font-size:1em;
color:#797979;
width:100%;
margin-left:auto;
margin-right:auto;
}
.dn_comm_foot_left{
float:left;
padding-top:0.4em;
color:#797979;
width:50%;
font-size:0.7em;
}
.dn_comm_replay{
float:left;
width:100%;
margin-top:1em;
padding-top:1em;
border-top:1px solid #eee;
}
.dn_comm_replay_field{
float:left;
width:100%;
margin-bottom:1em;
}
.dn_comm_replay_buttoms a,button{
float:right;
}
.dn_comm_replay_buttoms_cancel{
padding-top:0.5em;
margin-right:1em;
}
.dn_comm_dianzan{
width:100%;
float:left;
}
.dn_comm_showall{
float:left;
width:100%;
margin-top:1em;
padding-top:1em;
border-top:1px solid #eee;
}
.dn_comm_showall #dn_comm_showall_button{
float:left;
width:80%;
margin-left:10%;
margin-right:10%;
margin-top:1em;
border-top:1px solid #eee;
}
/*##############################################*/
/* */
.global{
width:716px;
}
.list_layout,.load_flag{
width:100%;
float:left;
display:block;
}
.load_flag{
padding-top:1em;
border-top:1px solid #eee;
margin-bottom:3em;
}
.load_flag button{
float:left;
width:80%;
margin-left:10%;
margin-right:10%;
}
.load_flag #load_flag_info{
float:left;
text-align:center;
width:80%;
margin-left:10%;
margin-right:10%;
display:none;
}
/*##############################################*/
/* */
</style>
js文件內(nèi)容如下（test.js）：
[javascript] view plain copy
$(document).ready(function(){
url_user = "http://user.com/i=";
url_img = "http://127.0.0.1/pages/";
url_dianzan = "http://dianzan.com";
url_dn_detail = "http://dt.com/i=";
layout_list = $(".list_layout");
t_dn = $("#t_dn");
t_dn_comm = $("#t_dn_comm");
maxnum = 2; // 最大加載次數(shù)
num = 1;
load_flag = $(".load_flag");
function render_dn_list(arr_dn){
for(var i=0; i<arr_dn.length;i++){
var node_dn = t_dn.clone();
node_dn.find(".dn_id").attr("content",arr_dn[i]["ID"]); //動(dòng)態(tài)ID
node_dn.find(".user_id").attr("content",arr_dn[i]["userid"]); //用戶ID
node_dn.find(".dn_left .dn_user_avatar a").attr("href",url_user+arr_dn[i]["userid"]); // 用戶名鏈接
node_dn.find(".dn_left .dn_user_avatar a img").attr("src",url_img+arr_dn[i]["avatar"]); // 用戶頭像
node_dn.find(".dn_zannum span").text(arr_dn[i]["zan"]); // 點(diǎn)贊數(shù)
//node_dn.find(".dn_dianzan a").attr("href",arr_dn[i]["avatar"]); // 點(diǎn)贊鏈接
node_dn.find(".dn_title a").attr("href",url_dn_detail+arr_dn[i]["fid"]+"#"+arr_dn[i]["ID"]); //跳轉(zhuǎn)動(dòng)態(tài)所在頁(yè)錨點(diǎn)
node_dn.find(".dn_title a span").text(arr_dn[i]["from"]); // 所屬標(biāo)題
node_dn.find(".dn_username a").attr("src",url_user+arr_dn[i]["userid"]); //用戶名鏈接
node_dn.find(".dn_username_name").text(arr_dn[i]["username"]); //用戶名
node_dn.find(".dn_username_signature").text(arr_dn[i]["signature"]); //用戶簽名
var digest = "";
var content = arr_dn[i]["content"];
if(content.length > 150){
digest=content.substring(0,150)+"... ";
}
else{
digest=content;
}
node_dn.find(".dn_content_digest").text(digest); //摘要
node_dn.find(".dn_content_digest").append("<a href='#'> 顯示全部</a>");
node_dn.find(".dn_content_text").text(content); // 正文
node_dn.find(".dn_action_time").text(arr_dn[i]["posttime"]); // 發(fā)布時(shí)間
// 添加點(diǎn)擊摘要事件
node_dn.find(".dn_content_digest").click(
function(){
var dn_right = $(this).parent().parent().parent();
dn_right.find(".dn_content_text").toggle();
dn_right.find(".dn_content_digest").toggle();
dn_right.parent().find(".dn_content_close1").toggle();
dn_right.parent().find(".dn_content_close2").toggle();
dn_right.parent().find(".dn_action").toggle();
var comm= dn_right.find(".dn_comm");
if(comm.css("display") == "block"){
comm.css("display","none");
}
return false; // !!
}
);
// 添加點(diǎn)擊折疊事件
node_dn.find(".dn_content_close2,.dn_content_close1").click(
function(){
var dn_right = $(this).parent().parent();
dn_right.find(".dn_content_text").toggle();
dn_right.find(".dn_content_digest").toggle();
dn_right.parent().find(".dn_content_close1").toggle();
dn_right.parent().find(".dn_content_close2").toggle();
dn_right.parent().find(".dn_action").toggle();
var comm= dn_right.find(".dn_comm");
if(comm.css("display") == "block"){
comm.css("display","none");
}
return false; // !!
}
);
// 為評(píng)論、分享、舉報(bào)按鈕添加hover下劃線效果
node_dn.find(".dn_action_comm,.dn_action_share,.dn_action_report").hover(
function(){
$(this).css("text-decoration","underline");
return false; // !!
}
,
function(){
$(this).css("text-decoration","none");
return false; // !!
}
);
// 為列表項(xiàng)添加點(diǎn)贊事件
node_dn.find(".dn_dianzan").click(
function(){
//alert('zan');
var dn_left = $(this).parent();
var zan_num = dn_left.find(".dn_zannum span");
var currzan = zan_num.text();
zan_num.text(parseInt(currzan)+1);
zan_num.animate({fontSize:"1.2em"},"fast");
$(this).animate({fontSize:"1.2em"},"fast");
zan_num.animate({fontSize:"1em"},"fast");
$(this).animate({fontSize:"1em"},"fast");
return false; // !!
}
);
// 加載評(píng)論，并處理評(píng)論項(xiàng)事件
function load_comm(dn_id,dn_comm_items,flag){
var load_url = "mockdata/commdata_";
if(flag == 1){
load_url = "mockdata/commdata_";
}
else{
load_url = "mockdata/commdata_";
}
$.ajax({
url:"mockdata/commdata_"+dn_id,
type: "get",//使用get方法訪問(wèn)后臺(tái)
dataType: "json",//返回json格式的數(shù)據(jù)
async:false,
//data: "pageIndex=" + pageIndex,//要發(fā)送的數(shù)據(jù)
complete :function(){$("#load").hide();},//AJAX請(qǐng)求完成時(shí)隱藏loading提示
success: function(msg){//msg為返回的數(shù)據(jù)，在這里做數(shù)據(jù)綁定
var encoded = $.toJSON(msg);
ret_code =$.evalJSON(encoded).code;
arr_dn =$.evalJSON(encoded).data;
if(ret_code == "200"){
for(var i=0;i<arr_dn.length;i++){
var n_comm = t_dn_comm.clone();
n_comm.find(".dn_comm_id").attr("content",arr_dn[i]["ID"]);
n_comm.find(".dn_comm_item_left a").attr("href",url_user+arr_dn[i]["userid"]);
n_comm.find(".dn_comm_item_left img").attr("content",url_img+arr_dn[i]["avatar"]);
n_comm.find(".dn_comm_item_middle_username a").attr("href",url_user+arr_dn[i]["userid"]);
n_comm.find(".dn_comm_item_middle_username a span").text(arr_dn[i]["username"]);
n_comm.find(".dn_comm_item_mid_content span").text(arr_dn[i]["content"]);
n_comm.find(".dn_comm_foot_left span").text(arr_dn[i]["posttime"]);
n_comm.find(".dn_comm_zannum span").text(arr_dn[i]["zan"]);
// 為評(píng)論項(xiàng)添加hover效果
n_comm.hover(function(){
$(this).find(".dn_comm_item_mid_action").toggle();
});
// 為評(píng)論項(xiàng)添加點(diǎn)贊動(dòng)畫(huà)效果
var zan = n_comm.find(".dn_comm_dianzan");
zan.click(
function(){
var zan_num = $(this).parent().find(".dn_comm_zannum");
var currzan = zan_num.text();
zan_num.text(parseInt(currzan)+1);
zan_num.animate({fontSize:"1.2em"},"fast");
$(this).animate({fontSize:"1.2em"},"fast");
zan_num.animate({fontSize:"1em"},"fast");
$(this).animate({fontSize:"1em"},"fast");
return false;
}
);
dn_comm_items.append(n_comm);
}
}
else{
alert(ret_code);
}
}
});
};
// 加載某一項(xiàng)的熱門(mén)評(píng)論
node_dn.find(".dn_action_comm").click(
function(){
var dn = $(this).parent().parent().parent().parent();
dn.find(".dn_comm").toggle();
var dn_comm_items = dn.find(".dn_comm_items");
dn_comm_items.empty();
var dn_id = dn.find(".dn_id").attr("content");
load_comm(dn_id,dn_comm_items,0);
return false; // !!
}
);
// 加載某一項(xiàng)的全部評(píng)論
node_dn.find(".dn_comm_showall_button").click(
function(){
var dn = $(this).parent().parent().parent().parent();
var dn_comm_items = dn.find(".dn_comm_items");
dn_comm_items.empty();
var dn_id = dn.find(".dn_id").attr("content");
load_comm(dn_id,dn_comm_items,1);
return false; // !!
}
);
//
layout_list.append(node_dn);
}
}
function fill_list(){
$.ajax({
url:"mockdata/listdata",
type: "get",//使用get方法訪問(wèn)后臺(tái)
dataType: "json",//返回json格式的數(shù)據(jù)
async:false,
//data: "pageIndex=" + pageIndex,//要發(fā)送的數(shù)據(jù)
complete :function(){$("#load").hide();},//AJAX請(qǐng)求完成時(shí)隱藏loading提示
success: function(msg){//msg為返回的數(shù)據(jù)，在這里做數(shù)據(jù)綁定
var encoded = $.toJSON(msg);
ret_code =$.evalJSON(encoded).code;
arr_dn =$.evalJSON(encoded).data;
if(ret_code == "200"){
render_dn_list(arr_dn);
}
else{
alert(ret_code);
}
}
});
}
// 為加載數(shù)據(jù)按鈕注冊(cè)事件
$(".load_flag").click(function(){
if(num <= maxnum){
fill_list();
num++;
}
else{
load_flag.find("#load_flag_info").css("display","block");
load_flag.find("#load_flag_button").css("display","none");
}
});
fill_list();
});
偽造的列表數(shù)據(jù)格式：
{
"code":"200",
"data":[
{
"ID":"1",
"fid":"1212",
"userid":"1001",
"avatar":"images/user.png",
"type":"閱讀注解",
"from":"金剛經(jīng)/第一品 法會(huì)因由分",
"username":"用戶名",
"signature":"用戶個(gè)性簽名",
"digest":"內(nèi)容摘要內(nèi)容摘。要內(nèi)容摘要,要內(nèi)容要內(nèi)容",
"content":"時(shí)長(zhǎng)老須菩提。在大眾中。即從座起。偏袒右肩。右膝著地。合掌恭敬。而白佛言。希有世尊。如來(lái)善護(hù)念諸菩薩。善付囑諸菩薩。世尊。善男子。善女人。發(fā)阿耨多羅三藐三菩提心。應(yīng)云何住，云何降伏其心。佛言。善哉善哉。須菩提。如汝所說(shuō)。如來(lái)善護(hù)念諸菩薩。善付囑諸菩薩。汝今諦聽(tīng)。當(dāng)為汝說(shuō)。善男子。善女人。發(fā)阿耨多羅三藐三菩提心。應(yīng)如是住，如是降伏其心。唯然。世尊。愿樂(lè)欲聞。",
"posttime":"2015-09-08 12:00:09",
"zan":"100"
},
{
"ID":"3",
"fid":"1212",
"userid":"1001",
"avatar":"images/user.png",
"type":"閱讀注解",
"from":"金剛經(jīng)/第一品 法會(huì)因由分",
"username":"用戶名",
"signature":"用戶個(gè)性簽名",
"digest":"內(nèi)容摘要內(nèi)容摘。要內(nèi)容摘要,要內(nèi)容要內(nèi)容",
"content":"不于一佛二佛三四五佛而種善根。已于無(wú)量千萬(wàn)佛所種諸善根。聞是章句。乃至一念生凈信者。須菩提。如來(lái)悉知悉見(jiàn)。是諸眾生。得如是無(wú)量福德。何以故。是諸眾生無(wú)復(fù)我相。人相。眾生相。壽者相。無(wú)法相。亦無(wú)非法相。何以故。是諸眾生。若心取相。則為著我人眾生壽者。若取法相。即著我人眾生壽者。何以故。若取非法相，即著我人眾生壽者。是故不應(yīng)取法。不應(yīng)取非法。",
"posttime":"2015-09-08 12:00:09",
"zan":"100"
},
偽造的評(píng)論數(shù)據(jù)格式：
{
"code":"200",
"data":[
{
"ID":"100001",
"fid":"1212",
"userid":"1001",
"avatar":"images/user.png",
"username":"用戶名",
"content":"時(shí)長(zhǎng)老須菩提。善付囑諸菩薩。汝今諦聽(tīng)。當(dāng)為汝說(shuō)。善男應(yīng)如是住，如是降伏其心。唯然。世尊。愿樂(lè)欲聞。",
"posttime":"2015-09-08 12:00:09",
"zan":"100"
},
{
"ID":"100001",
"fid":"1212",
"userid":"1001",
"avatar":"images/user.png",
"username":"用戶名",
"content":"時(shí)長(zhǎng)老須菩提。善付囑諸菩薩。汝今諦聽(tīng)。當(dāng)為汝說(shuō)。善男應(yīng)如是住，如是降伏其心。唯然。世尊。愿樂(lè)欲聞。",
"posttime":"2015-09-08 12:00:09",
"zan":"100"
},
以上所述是小編給大家介紹的基于jQuery和Bootstrap框架實(shí)現(xiàn)仿知乎前端動(dòng)態(tài)列表效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法
- jQuery實(shí)現(xiàn)動(dòng)態(tài)加載select下拉列表項(xiàng)功能示例
- jQuery實(shí)現(xiàn)列表內(nèi)容的動(dòng)態(tài)載入特效
- jQuery動(dòng)態(tài)產(chǎn)生select option下拉列表
- jQuery簡(jiǎn)單實(shí)現(xiàn)向列表動(dòng)態(tài)添加新元素的方法示例
- jQuery實(shí)現(xiàn)動(dòng)態(tài)生成年月日級(jí)聯(lián)下拉列表示例
- 如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表
- jQuery列表動(dòng)態(tài)增加和刪除的實(shí)現(xiàn)方法
相關(guān)文章
基于jquery的滾動(dòng)條滾動(dòng)固定div(附演示下載)
今天與大家分享一下我寫(xiě)的一個(gè)滾動(dòng)條滾動(dòng)固定div的例子，現(xiàn)在很多地方都可以看到這樣的效果2012-10-10
jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果）
本文主要介紹了jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果），文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-11-11
jquery處理checkbox（復(fù)選框）是否被選中實(shí)例代碼
這篇文章主要介紹了jquery處理checkbox（復(fù)選框）是否被選中實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
之前本人的工作和學(xué)習(xí)多以原生js 為主，對(duì)jQuery 一直都不是很了解，但jQuery 作為當(dāng)今最優(yōu)秀的js 類(lèi)庫(kù)之一，必須是要花時(shí)間好好學(xué)習(xí)下的，今天正好蛋疼，讀了里面一些代碼2011-04-04
在一個(gè)不是自己寫(xiě)的頁(yè)面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡(jiǎn)單的介紹下,需要的朋友可以參考下2014-06-06
學(xué)習(xí)使用jQuery表單驗(yàn)證插件和日歷插件
這篇文章主要為大家詳細(xì)介紹了jQuery表單驗(yàn)證插件與日歷插件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了jquery日歷控件實(shí)現(xiàn)方法，網(wǎng)上有好多這樣的插件，下面是自己實(shí)現(xiàn)的一個(gè)方法,需要的朋友可以參考下2014-03-03
jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕制作
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
本文給大家分享的是jQuery制作文字輪播的特效，非常的實(shí)用，屬于作者原創(chuàng)代碼，分享給大家2017-02-02