手风琴效果+自动加载数据,默认打开第一个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>LOC - 系統資訊</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#coast_product .none:eq(0)").show();
$("#coast_product").find("h3:eq(0)").addClass("fold")
$("#coast_product").find("h3").click(function(){
if($(this).next("div").is(":visible")){
$(this).removeClass("fold").next("div").stop(false,true).slideUp();
}else{
$(this).addClass("fold").siblings("div").stop(false,true).slideDown();
$(this).parent().siblings().children("h3").removeClass("fold");
$(this).parent().siblings().children("div").slideUp();
}
});
});
</script>
<script type="text/javascript">
$(function(){
var winH = $(window).height(); //页面可视区域高度
var i = 1; //设置当前页数
var jiazai=true;
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02 && jiazai){
jiazai=false;
$.getJSON("result.php",{page:i},function(json){
jiazai=true;
if(json){
var str = "";
$.each(json,function(index,array){
var str = "<div class=\'clearfix\'><h3><img src=\'images/ad001.png\'><span class=\'fl f16\'>"+array['title']+array['thumb']+"</span><em class=\'fr coast_product_icon\'> </em></h3><div class=\'none\'>"+array['description']+"</div></div>";
$("#coast_product").append(str).trigger( "create" );
});
i++;
}
});
}
});
});
</script>
<style>
body{ margin:0px; font-family: Arial, SimSun, san-serif; background-color:#d3d3d3; background-size:cover;}
.fl{ float:left; display:inline;}
.fr{ float:right; display:inline;}
.demo{ min-width:310px;}
.demo{width:100%;margin:0 auto;background-color:#ffffff;}
.clearfix:after{clear:both;content:"";display:block;height:0; font-size:0px; visibility:hidden;}
.clearfix{zoom:1;}
.block{ display:block;}
.inline{ display:inline;}
.in_b {display:inline-block;}
.none{ display:none;clear:both;padding: 1px 20px 6px;background:#d3d3d3 url(images/shadow.png) top repeat-x;border-bottom: 1px solid #e5e5e5;font-size:14px;}
.coast_product{background-color:#ffffff;}
.coast_product h3{ margin-top:1px; cursor:pointer; padding-left:5px;width:100%;border-bottom:1px solid #d3d3d3;}
.coast_product h3 span{ font-size:14px;font-weight:normal; line-height:30px; display:block;padding:5px;}
.coast_product h3 img{width:30px; height:auto;float:left;margin-top:6px;}
.coast_product_icon{ display:inline-block; width:20px; height:20px; background:url(images/down.png); margin-right:24px;margin-top:10px;}
.coast_product h3.fold .coast_product_icon{ background:url(images/left.png);}
</style>
</head>
<body>
<div class="demo" style="overflow:auto;overflow-x: hidden">
<div id="coast_product" class="coast_product">
<?php
require_once('config.php'); //连接数据库
$stmt = $db->prepare("select title,date,info from table order by id desc limit 0,10");
$stmt->execute();
foreach($stmt as $k=>$v) {?>
<div class="clearfix">
<h3><img src="images/ad001.png"><span class="fl f16"><?php $date=str_replace('-','/',$v['date']); echo $v['title'].'  '.substr($date,0,10);?></span><em class="fr coast_product_icon"> </em></h3>
<div class="none">
<?php echo $v['info'];?>
</div>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
result.php
<?php
require_once('config.php');
$page = intval($_GET['page']);
$start = $page*10;
$stmt = $db->prepare("select title,date,info from table order by id desc limit $start,10");
$stmt->execute();
foreach($stmt as $k=>$v) {
$date = str_replace('-','/',$v['date']);
$time = '  '.substr($date,0,10);
$arr[]= array(
'title'=>$v['title'],
'thumb'=>$time,
'description'=>$v['info']
);
}
echo json_encode($arr); //转换为json数据输出
?>
浙公网安备 33010602011771号