首页 > 代码库 > cktt延迟加载 到底部
cktt延迟加载 到底部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<title>参考听听</title>
<link rel="stylesheet" type="text/css" href="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/common.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/module.css" media="all" />
<script type="text/javascript" src="http://img.cankaoxiaoxi.com/js/lib/jquery.js"></script>
</head>
<body>
<style>
*{margin:0; padding:0;}
a, a:visited {text-decoration:none;}
.list li {height:61px; border-top:1px solid #cccccc; list-style:none; background:url(‘http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/back_tt.png‘) no-repeat 0px 5px; background-size:auto 50px; clear:both; margin-left:5px; position:relative;}
.list img {width:45px; height:45px; margin:8px 10px 8px 2px; float:left; border:none;}
.list li a{color:#000000; font-size:16px; font-family:"微软雅黑"; line-height:58px; margin-left:3px; list-style:none; margin-left:10px;}
.list li a:first-child {margin:0;}
.list li span { font-size:13px; color:#ffffff; font-family:"黑体"; margin-left:5px;}
</style>
<!--要闻 start-->
<div>
<div class="pindao">
<ul class="list">
<li>
<a href="javascript:;" title="英女子连考110次驾照未过" onm ouseUp="show(1)" onm ouseDown="change(1)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>060期</span>
<a href="javascript:;" onClick="show(1)" title="英女子连考110次驾照未过">英女子连考110次驾照未过</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="1"><audio src="" autoplay="autoplay" ontimeupdate="update(1)" onended="end(1)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="研究证实满月影响人类睡眠" onm ouseUp="show(2)" onm ouseDown="change(2)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>059期</span>
<a href="javascript:;" onClick="show(2)" title="研究证实满月影响人类睡眠">研究证实满月影响人类睡眠</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="2"><audio src="" autoplay="autoplay" ontimeupdate="update(2)" onended="end(2)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="中国球迷钟爱德国队" onm ouseUp="show(3)" onm ouseDown="change(3)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>058期</span>
<a href="javascript:;" onClick="show(3)" title="中国球迷钟爱德国队">中国球迷钟爱德国队</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="3"><audio src="" autoplay="autoplay" ontimeupdate="update(3)" onended="end(3)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="夏季停车开空调可致中毒" onm ouseUp="show(4)" onm ouseDown="change(4)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>057期</span>
<a href="javascript:;" onClick="show(4)" title="夏季停车开空调可致中毒">夏季停车开空调可致中毒</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="4"><audio src="" autoplay="autoplay" ontimeupdate="update(4)" onended="end(4)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="音乐让幼儿更有团队精神" onm ouseUp="show(5)" onm ouseDown="change(5)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>056期</span>
<a href="javascript:;" onClick="show(5)" title="音乐让幼儿更有团队精神">音乐让幼儿更有团队精神</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="5"><audio src="" autoplay="autoplay" ontimeupdate="update(5)" onended="end(5)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="世界杯笑话一箩筐" onm ouseUp="show(6)" onm ouseDown="change(6)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>055期</span>
<a href="javascript:;" onClick="show(6)" title="世界杯笑话一箩筐">世界杯笑话一箩筐</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="6"><audio src="" autoplay="autoplay" ontimeupdate="update(6)" onended="end(6)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="西藏人有远古人类基因" onm ouseUp="show(7)" onm ouseDown="change(7)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>054期</span>
<a href="javascript:;" onClick="show(7)" title="西藏人有远古人类基因">西藏人有远古人类基因</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="7"><audio src="" autoplay="autoplay" ontimeupdate="update(7)" onended="end(7)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="研究破译黑猩猩“手语”" onm ouseUp="show(8)" onm ouseDown="change(8)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>053期</span>
<a href="javascript:;" onClick="show(8)" title="研究破译黑猩猩“手语”">研究破译黑猩猩“手语”</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="8"><audio src="" autoplay="autoplay" ontimeupdate="update(8)" onended="end(8)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="人们为何喜欢文身？" onm ouseUp="show(9)" onm ouseDown="change(9)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>052期</span>
<a href="javascript:;" onClick="show(9)" title="人们为何喜欢文身？">人们为何喜欢文身？</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="9"><audio src="" autoplay="autoplay" ontimeupdate="update(9)" onended="end(9)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
<li>
<a href="javascript:;" title="日本美容风尚令西方人不解" onm ouseUp="show(10)" onm ouseDown="change(10)"><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" /></a>
<span>051期</span>
<a href="javascript:;" onClick="show(10)" title="日本美容风尚令西方人不解">日本美容风尚令西方人不解</a>
<div style="margin: 10px 0 0 0; clear:both;display:none;" id="10"><audio src="" autoplay="autoplay" ontimeupdate="update(10)" onended="end(10)" one rror = "this.load();"></audio></div>
<div style="width:100px; height:100px; position:absolute; top:39px; left:48px; "><img srchttp://www.mamicode.com/= "http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png" style ="width:0px; height:8px; border-radius:10px;"></div>
</li>
</ul>
<div id="loading" style="background:linear-gradient(-90deg,#fff,#999); color:#000; width:148px; line-height:20px; position:absolute; padding:0 3px";>正在加载中...</div>
<div id="over" style="background:white; display:none; color:#999; width:333px; line-height:20px; position:absolute; padding:0 3px";> 已到最底部</div>
<!-- 分页 -->
<!-- <div class="page center mar-b-10 ov">
<ul>
<li><a href="javascript:void(0);" class="prev disable">上一页</a></li><li><a href="javascript:void(0);" class="now">1</a></li><li><a href="http://m.cankaoxiaoxi.com/listener/2.shtml">2</a></li><li><a href="http://m.cankaoxiaoxi.com/listener/3.shtml">3</a></li><li><a href="http://m.cankaoxiaoxi.com/listener/4.shtml">4</a></li><li><a href="http://m.cankaoxiaoxi.com/listener/5.shtml">5</a></li><li><a href="http://m.cankaoxiaoxi.com/listener/6.shtml">6</a></li><li><a href="http://m.cankaoxiaoxi.com/listener/2.shtml" class="next">下一页</a></li> </ul>
</div>
-->
</div>
</div>
<!--要闻 end-->
<script >
var aSrc =http://www.mamicode.com/new Array();
aSrc[0] =‘http://upload.cankaoxiaoxi.com/2014/0716/1405496361614.mp3‘;
aSrc[1] =‘http://upload.cankaoxiaoxi.com/2014/0713/1405245835578.mp3‘;
aSrc[2] =‘http://upload.cankaoxiaoxi.com/2014/0713/1405245829811.mp3‘;
aSrc[3] =‘http://upload.cankaoxiaoxi.com/2014/0711/1405044582891.mp3‘;
aSrc[4] =‘http://upload.cankaoxiaoxi.com/2014/0710/1404954951860.mp3‘;
aSrc[5] =‘http://upload.cankaoxiaoxi.com/2014/0708/1404783330304.mp3‘;
aSrc[6] =‘http://upload.cankaoxiaoxi.com/2014/0708/1404782971426.mp3‘;
aSrc[7] =‘http://upload.cankaoxiaoxi.com/2014/0707/1404694578173.mp3‘;
aSrc[8] =‘http://upload.cankaoxiaoxi.com/2014/0704/1404431315276.mp3‘;
aSrc[9] =‘http://upload.cankaoxiaoxi.com/2014/0703/1404344215737.mp3‘;
function end(p){
var oUl = document.getElementsByTagName(‘ul‘);
var oDiv = oUl[0].children[p-1].children[4];
var oMus = oUl[0].children[p-1].children[3];
var oImg = oUl[0].children[p-1].children[0];
oImg.innerHTML = ‘<img src="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" />‘;
oDiv.children[0].style.width = "230px";
}
function update(p){
var oUl = document.getElementsByTagName(‘ul‘);
var oDiv = oUl[0].children[p-1].children[4];
var oMus = oUl[0].children[p-1].children[3];
var oImg = oUl[0].children[p-1].children[0];
var oDu = oMus.children[0].duration;
oDu = oDu>51?oDu:55;
var oCu = oMus.children[0].currentTime;
var len = oCu*230.0;
var len = len/oDu;
var lenc = len+"px";
oDiv.children[0].style.width = lenc;
}
function show(p){
var oUl = document.getElementsByTagName(‘ul‘);
var oMus = oUl[0].children[p-1].children[3];
var oImg = oUl[0].children[p-1].children[0];
if(oMus.style.display == "none")
{
for(var i=0; i<oUl[0].children.length; i++){
//alert(123);
oUl[0].children[i].children[3].style.display = "none";
oUl[0].children[i].children[3].children[0].pause();
oUl[0].children[i].children[0].innerHTML = ‘<img src="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" />‘;
}
oMus.style.display = "block";
if(oMus.children[0].src!=aSrc[p-1]&&aSrc[p-1]){oMus.children[0].src = http://www.mamicode.com/aSrc[p-1]; }
oMus.children[0].play();
var num=p-1;
$.getJSON("http://app.cankaoxiaoxi.com/?app=system&controller=channel_tt&action=playtimes&catid=305&num=" + num +"&jsoncallback=?", function(data){
});
oImg.innerHTML = ‘<img src="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/zanting.png" />‘;
setTimeout(reload(p),1200);
//oUl[0].children[p-1].style.height=‘115px‘;
}
else
{
oMus.style.display = "none";
oImg.innerHTML = ‘<img src="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png" />‘;
oMus.children[0].pause();
//oUl[0].children[p-1].style.height=‘58px‘;
}
}
function change(p){
var oUl = document.getElementsByTagName(‘ul‘);
var oMus = oUl[0].children[p-1].children[3];
var oImg = oUl[0].children[p-1].children[0]
if(oMus.style.display == "none")
{
//oMus.style.display = "block";
//if(oMus.children[0].src!=aSrc[p-1]){oMus.children[0].src = http://www.mamicode.com/aSrc[p-1]; }
//oMus.children[0].play();
oImg.innerHTML = ‘<img src="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang2.png" />‘;
//oUl[0].children[p-1].style.height=‘115px‘;
}
else
{
//oMus.style.display = "none";
oImg.innerHTML = ‘<img src="http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/zanting2.png" />‘;
//oMus.children[0].srchttp://www.mamicode.com/= "";
//oUl[0].children[p-1].style.height=‘58px‘;
}
}
function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(".")[1].length}catch(e){}
try{t2=arg2.toString().split(".")[1].length}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(".",""))
r2=Number(arg2.toString().replace(".",""))
return (r1/r2)*pow(10,t2-t1);
}
}
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
function reload(p){
var oUl = document.getElementsByTagName(‘ul‘);
var oMus = oUl[0].children[p-1].children[3];
var oImg = oUl[0].children[p-1].children[0];
if(oMus.children[0].currentTime<1.0){
var oDu = oMus.children[0].load();
}
}
function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//文档的总高度
function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
//浏览器视口的高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
window.onscroll = function(){
if(getScrollTop() + getWindowHeight() == getScrollHeight()){
var oUl = document.getElementsByTagName(‘ul‘);
var num = oUl[0].children.length;
var num_show = parseInt(oUl[0].children[num-1].children[1].innerHTML);
var loadin=document.getElementById("loading");
var ove=document.getElementById("over");
// alert (num);
// alert(oUl[0].children[0]);
loadin.style.display = "block";
setTimeout( function(){ $.getJSON("http://app.cankaoxiaoxi.com/?app=system&controller=channel_tt&action=index&catid=305&size=5&num=" + num +"&jsoncallback=?",
function(data){
if(data)
{
//var oUl = document.getElementsByTagName(‘ul‘);
for(var elem in data){
num_show--;
if(num_show=="00"+1) {
loadin.style.display = "none";
ove.style.display = "block";
}
if(num_show<10) {num_show="00"+num_show;
}
else if(num_show<100) num_show="0"+num_show;
num++;
aSrc[num-1]=data[elem].url;
oUl[0].innerHTML=oUl[0].innerHTML+"<li><a href=‘javascript:;‘ title=‘"+data[elem].title+"‘ onm ouseup=‘show("+num+")‘ onm ousedown=‘change("+num+")‘><img src = http://www.mamicode.com/‘http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/bofang.png‘ />"+num_show+"期</span><a href=‘javascript:;‘ onclick=‘show("+num+")‘ title=‘" + data[elem].title + "‘>" + data[elem].title + "</a><div style=‘margin: 10px 0 0 0; clear:both;display:none;‘ id=‘"+num+"‘><audio src=http://www.mamicode.com/‘‘ autoplay=‘autoplay‘ ontimeupdate=‘update("+num+")‘ onended=‘end("+num+")‘ one rror = ‘this.load();‘></audio></div><div style=‘width:100px; height:100px; position:absolute; top:39px; left:48px; ‘><img src = http://www.mamicode.com/‘http://img.cankaoxiaoxi.com/templates/cankaoxiaoxi/css/img/len_tt.png‘ style =‘width:0px; height:8px; border-radius:10px;‘>
}
}
)},2000)
}
}
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src=http://www.mamicode.com/‘" + _bdhmProtocol + "hm.baidu.com/h.js%3F308b87570281daa02f0d31c085c39163‘ type=‘text/javascript‘%3E%3C/script%3E"));
</script>
</body>
</html>
cktt延迟加载 到底部