您现在的位置是:首页 > 学无止境> JS网站首页学无止境JS

jquery 实现点击加载更多效果

简介jquery 实现点击加载更多效果

<!DOCTYPE>
<html>
<head>
<title>加载更多代码</title>
<meta name=’HandheldFriendly’ content=’True’>
<meta name=’MobileOptimized’ content=’320′>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<link media=screen href=”css/load.css” type=”text/css” rel=”stylesheet”>
<script type=”text/javascript” src=”js/jquery-1.9.1.js”></script>
<script type=”text/javascript”>
$(function(){
//单个li的高度
var liHeight=$(‘#result li’).height();
//总li的个数
var count=$(‘#result li’).length;
//初始高度
var dheight=liHeight*2;
//初始高度设置,其余隐藏
$(‘#result’).css({“height”:dheight+”px”,”overflow”:”hidden”});
//计算出全部显示的高度
var zongh=Math.ceil(count/3)*liHeight;
var n=1;
$(‘#btnTest’).click(function(){
$(“#btnTest”).html(“<img src=’images/loading.gif’ />”);
$(‘#loader’).animate({‘opacity’:1},200,function(){
n++;
//每次加载与初始高度相同高度
//h=dheight*n;
//每次加载一行高度
h=dheight+liHeight*(n-1);
$(‘#result’).height(h);
if(h>=zongh){
$(‘#btnTest’).hide();
$(‘#result’).height(zongh);
}
$(‘#loader’).css(‘opacity’,0);
$(“#btnTest”).html(“查看更多”);
})
})
})
</script>
</head>
<body>
<div class=”box-163css”>
<div id=”result”>
<ul>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题1</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题2</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题3</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题4</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题5</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题6</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题7</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题8</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题9</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题10</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题11</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题12</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题13</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题14</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题15</strong></a></li>
<li><a href=”#”><img src=”images/img01.jpg” /><strong>标题16</strong></a></li>
</ul>
</div>
<div id=”loader”><img src=”images/loading.gif” /></div>
<span id=”btnTest”>查看更多</span>
</div>
</body>
</html>


css代码:

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:14px;vertical-align:middle;}
body{font-size:14px;font-family:"Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif; color:#969696;  text-align:center; margin:0 auto; overflow-x:hidden;}
table{border-collapse:collapse;border-spacing:0;}
a{ text-decoration:none; color:#333;}
.box-163css{ width:340px; margin:20px auto;}
#result{ width:340px; margin:0 auto; text-align:left;}
#result li{width:100px; margin-left:10px; float:left;}
#result li img{ width:100px; height:100px; margin-bottom:8px;}
#result li strong{ font-weight:normal; font-size:12px; line-height:26px; overflow:hidden; display:block;}
#loader{ opacity:0; position:absolute; z-index:-1; left:50%; margin-left:-16px;}
#btnTest{ cursor:pointer; border:1px solid #ccc; margin:0 auto; background:#f2f2f2; height:34px; line-height:34px; display:block; width:90px; position:relative;}
Top