1.专辑页（分类页）
2.播放列表（播放，切换）
主要是H5的视频控件，以及配合js，使用户交互更顺滑。
①原php+html部分（含css）
<?php
header("content-type:text/html;charset=utf-8");
include_once('/opt/c*******inc/global.php');
$ms = new Mysqls();
$album_id = $_GET['album_id'];
$sql = "select ********`=1 limit 10" ;
$data = $ms->getRows($sql);
$sql = "select count(*) a******`={$album_id} and `state`=1 limit 1" ;
$num = $ms->getRow($sql);
$sql = "select *****where `id`={$album_id} limit 1" ;
$album_data = $ms->getRow($sql);
$sql = "select * from `user` where `id`={$album_data['user_id']} limit 1" ;
$user = $ms->getRow($sql);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0,telephone=no" />
<meta name="format-detection" content="telephone=no" />
<title>早教故事</title>
<div style="display:none;"><script src="https://s13.cnzz.com/z_stat.php?id=1262163010&web_id=1262163010" language="JavaScript"></script></div>
<script src="http://file2.ci123.com/ast/js/jquery_172.js" language="javascript"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script language="javascript">
var phoneWidth = parseInt(window.screen.width);var iwidth = 750;var phoneScale = phoneWidth/iwidth;var ua = navigator.userAgent;var os = 1;if (/Android (\d+\.\d+)/.test(ua)){var version = parseFloat(RegExp.$1);os = 2;if(version>2.3){document.write('<meta name="viewport" content="width='+iwidth+', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width='+iwidth+', target-densitydpi=device-dpi">')}} else {document.write('<meta name="viewport" content="width='+iwidth+', user-scalable=no, target-densitydpi=device-dpi">')}
</script>
<style type="text/css">
body{margin:0;padding:0;font-family:Arial;font-size:24px;background:#f3f3f3;}
ul,li,dl,dt,dd,p,div{margin:0;padding:0;list-style:none}
@font-face{font-family:'iconfont';src:url('font/iconfont.woff') format('woff'),url('font/iconfont.ttf') format('truetype');}
.fix{position:fixed;top:0;left:0;width:100%;background:#000;}
.head{width:100%;height:352px;position:relative;}
/* .head{width:100%;height:352px;position:fixed;top：0;left：0;} */
.head img{width:100%;height:352px;filter: blur(9px);}
.head .out{position:absolute;top:0;left:0;width:100%;height:352px;background:rgba(0,0,0,0.7);}
.pic{position:absolute;top:44px;left:256px;width:238px;height:238px;}
.pic img{width:238px;height:238px;filter:blur(0px);}
.introduce{background:#fff;width:100%;margin-top:352px;}
.name{float:left;margin:46px 0 0 44px;width:514px;}
.title{font-size:32px;font-weight:bold;color:#2c2d2e;}
.portrait{float:left;width:41px;height:41px;border-radius:100%;overflow:hidden;margin:16px 20px 30px 0;}
.portrait img{width:41px;height:41px;}
.signer{float:left;font-size:26px;color:#8a8a8a;margin-top:26px;}
.btn{float:left;width:136px;height:48px;border:2px solid #1ab7e2;border-radius:48px;color:#1ab7e2;font-size:26px;text-align:center;line-height:49px;margin-top:60px;}
.tip{clear:both;font-size:30px;color:#8a8a8a;line-height:1.5em;padding:0 44px 34px 44px;}
.num{font-size:27px;color:#929292;padding:11px 0 11px 44px;}
ul{background:#fff;padding-bottom:30px;}
li{height:145px;}
.on{width:12px;height:80%;float:left;margin:18px 30px 0 0;}
.a{background:#2c2d2e;}
.bor{width:700px;float:left;border-bottom:2px solid #f0f0f0;}
.mid{width:586px;float:left;}
.caption{font-size:32px;color:#2c2d2e;padding:28px 0 20px 0;}
.time{width:158px;float:left;color:#acacac;font-size:20px;margin-bottom:30px;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
.time span{color:#d2d3d4;}
.watch{float:left;color:#acacac;font-size:20px;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
.watch span{color:#d2d3d4;}
.bo{float:left;font-size:32px;line-height:144px;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;color:#fff;}
.b{color:#393a3b;}
.loading{clear:both;margin:0 auto;width:200px;text-align:center;color:#555;/*display:none;*/}
.loading i{display:inline-block;width:15px;height:15px;background:url(http://filebaby.qubaobei.com/box/images/phone/loading.png) no-repeat;background-size:15px 15px;animation:loading 0.8s linear infinite;-moz-animation:loading 0.8s linear infinite;-webkit-animation:loading 0.8s linear infinite;}
.loading span{margin-left:8px;}
.intro{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);display:none;}
.close{font-size:70px;color:#fff;text-align:right;margin:30px 30px 0 0;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
.writer{width:140px;height:140px;border-radius:140px;overflow:hidden;margin:130px auto 40px;}
.writer img{width:100%;height:100%;}
.named{font-size:34px;color:#fff;text-align:center;}
.intro p{width:88%;margin:50px auto;font-size:30px;color:#fff;line-height:1.5em;}
</style>
</head>
<body>
<div class="fix">
<div class="head">
<!--主要部分H5的视频控件-->
<video poster="<?php echo $data[0]['pic'];?>" controls="controls" width="100%" height="100%" x5-playsinline="" playsinline="" webkit-playsinline="">
<source src="<?php echo $data[0]['high_url'];?>" type="video/mp4">
</video>
</div>
</div>
<div class="introduce">
<div class="name">
<div class="title"><?php echo $album_data['name']; ?></div>
<div class="portrait"><img src="http://www.qubaobei.com/<?php echo $user['avatar'];?>" /></div>
<div class="signer"><?php echo $user['nickname'];?></div>
</div>
<div class="btn">专辑介绍</div>
<div class="tip"><?php echo $album_data['desc']; ?></div>
</div>
<div class="num">共<?php echo $num['ct'];?>个故事</div>
<ul id="content">
<?php foreach($data as $v):?>
<li id="<?php echo $v['id'];?>" onclick="changeTv(this,'<?php echo $v['pic'];?>','<?php echo $v['high_url'];?>')">
<div class="on" ></div><!--选中添加样式.a-->
<div class="bor">
<div class="mid">
<div class="caption"><?php echo $v['name'];?></div>
<div class="time"><span></span> <?php echo date("i:s",$v['time']);?></div>
<div class="watch"><span></span> <?php echo $v['num'];?></div>
</div>
<div class="bo"></div><!--选中添加样式.b-->
</div>
</li>
<?php endforeach;?>
</ul>
<div id="more" class="loading"><i></i><span>正在加载...</span></div><!--下拉加载-->
<div class="intro">
<div class="close"></div>
<div class="writer"><img src="<?php echo $album_data['pic']; ?>" /></div>
<div class="named"><?php echo $album_data['name'];?></div>
<p> <?php echo $album_data['desc']; ?></p>
</div>
</body>
</html>②JS交互部分
var album_id = "<?php echo $album_id; ?>";
var page = 2;
$(function(){
$("ul li:eq(0)").find(".on").addClass("a");
$("ul li:eq(0)").find(".bo").addClass("b");
})
//无刷新切换视频
function changeTv(content,img,video){
$(".on").removeClass("a");
$(".bo").removeClass("b");
$(content).find(".on").addClass("a");
$(content).find(".bo").addClass("b");
$(".head").children().remove();
var str = "<video poster=\""+img+"\" controls=\"controls\" width=\"100%\" height=\"100%\" x5-playsinline=\"\" playsinline=\"\" webkit-playsinline=\"\"><source src=\""+video+"\" type=\"video/mp4\"><\/video>";//替换原来的视频控件
$(".head").append(str);
}
//上划触底加载（翻页）
function getMore(){
var stt = '';
$.get("sub/get_box_list.php?page="+page+"&album_id="+album_id,function(data){
$("#more").hide();
var data = JSON.parse(data);
console.log(data);
if(data['ret']==1){
stt = editData(data['data']);
$("#content").append(stt);
page++;
}else{
alert("亲，没有啦~")
page=-1;
}
});
}
//新数据处理
function editData(data){
var stt = '';
$.each(data,function(i,i_val){
var daren = '';
var id = i_val['id'];
var pic = i_val['pic'];
var high_url = i_val['high_url'];
var name = i_val['name'];
var time = s_to_hs(i_val['time']);
var num = i_val['num'];
stt = stt+"<li id=\""+id+"\" onclick=\"changeTv(this,'"+pic+"','"+high_url+"')\"><div class=\"on\" ></div><div class=\"bor\"><div class=\"mid\"><div class=\"caption\">"+name+"</div><div class=\"time\"><span></span> "+time+"</div><div class=\"watch\"><span></span> "+num+"</div></div><div class=\"bo\"></div></div></li>"
});
return stt;
}
//触底事件监听
$(window).scroll(function() {
if(page < 0){
return false;
}
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
var cha = scrollHeight - scrollTop - windowHeight;
if (cha<10) {
$("#more").show();
getMore();
}
});
/**
* 将秒转换为 分:秒（额外功能数据忽略）
* s int 秒数
*/
function s_to_hs(s){
//计算分钟
//算法：将秒数除以60，然后下舍入，既得到分钟数
var h;
h = Math.floor(s/60);
//计算秒
//算法：取得秒%60的余数，既得到秒数
s = s%60;
//将变量转换为字符串
h += '';
s += '';
//如果只有一位数，前面增加一个0
h = (h.length==1)?'0'+h:h;
s = (s.length==1)?'0'+s:s;
return h+':'+s;
}
$(".btn").click(function(){
$(".intro").show()
})
$(".close").click(function(){
$(".intro").hide()
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
