网站建设网站首页 学无止境 网站建设

手机站常用点击加载更多代码

Lee D
网站建设
2019-08-12
783已阅读

jquery js 手机特效加载

简介

手机站常用点击加载更多代码：

<!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').outerHeight();
//总li的个数
var count=$('#result li').length;
//初始高度
//var dheight=liHeight*5;
if (count<5){
var dheight=liHeight*count;
$("#loader,#btnTest").css("display","none");
}else{
var dheight=liHeight*5;
}
//初始高度设置，其余隐藏
$('#result').css({"height":dheight+"px","overflow":"hidden"});
//计算出全部显示的高度
var zongh=Math.ceil(count/3)*liHeight;
var n=2;
$('#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>

在线预览：手机站常用点击加载更多代码

点击下载：loading.zip