您现在的位置是:首页 > 学无止境> 网站建设网站首页学无止境网站建设
手机站常用点击加载更多代码
- 网站建设
- 2019-08-12
- 2847已阅读
简介
手机站常用点击加载更多代码:
<!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
相关文章
- 二维码生成及图片合成代码
- 警告:include(): Failed opening '../conn/conn.php' for inclusion (include_path='.;')
- 完美解决织梦ckeditor编辑器插入视频前台后台不能播放的问题
- 织梦上传的mp4文件提示多媒体文件类型不在许可列表和站内媒体选择无法显示
- 织梦dede:channel指定typeid子栏目调用currentstyle高亮无效的解决方法
- 织梦模板用{dede:sql}标签如何实现分页的示例代码
- 修改dedecms后台上传pdf格式的文件限制
- 织梦cms-dedecms列表页调用字段,判断字段是否为空
- 网站如何实现 在qq中发自己链接时,便自动获取链接标题、图片和部分内容
- thinkphp5 部署