2.播放列表(播放,切换)
主要是H5的视频控件,以及配合js,使用户交互更顺滑。
①原php+html部分(含css)
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);
?>
早教故事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('')}else{document.write('')}} else {document.write('')}
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;}
![<?php%20echo%20%24user%5B'avatar'%5D;?>](https://i-blog.csdnimg.cn/blog_migrate/05f78b64a1e3df30069d832a1e95aabf.png)
-
<?php echo date("i:s",$v['time']);?> <?php echo $v['num'];?>
②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 = "";//替换原来的视频控件
$(".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+"
});
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()
})
本文分享 CSDN - 阿……莫西林。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。