1 Star 9 Fork 1

xiaogg/vip_yingshi

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index.html 4.29 KB
一键复制 编辑 原始数据 按行查看 历史
web 提交于 2021-06-02 16:44 . 修复缺失图标问题
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="./css/api.css"/>
<link rel="stylesheet" type="text/css" href="./css/aui.css"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<link rel="stylesheet" type="text/css" href="./css/iconfont.css">
<style>
header{ background-color: #ffffff; }
header ul li { height:2rem; line-height:2rem; text-align: center; display: none; color: #333; position: relative;font-size: 0.9rem; }
header ul li.active{ display: block; }
#footer{ background-color: #ffffff;}
#footer ul li{ height: 2.25rem; padding-top: 1.25rem; padding-bottom: 1px; background: url() no-repeat center 2px; font-size: 0.6rem;background-size: auto 1.1rem; text-align: center; }
#footer ul li.active{ color: #FF6666; }
#footer ul li:nth-child(1){ background-image: url(./image/shouye.png); }
#footer ul li:nth-child(2){ background-image: url(./image/zhibo.png); }
#footer ul li:nth-child(3){ background-image: url(./image/wode.png); }
#footer ul li:nth-child(1).active{ background-image: url(./image/shouye2.png); }
#footer ul li:nth-child(2).active{ background-image: url(./image/zhibo2.png); }
#footer ul li:nth-child(3).active{ background-image: url(./image/wode2.png); }
.flex-con{
overflow: auto;
background-color:#fff;
}
</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
<header>
<ul>
<li class="border-b active" >VIP影视</li>
<li class="border-b" >直播</li>
<li class="border-b" >设置</li>
</ul>
</header>
<div id="main" class="flex-con">
</div>
<div id="footer" class="border-t">
<ul class="flex-wrap" >
<li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >首页</li>
<li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >直播</li>
<li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >设置</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript">
apiready = function () {
var systemVersion = parseInt(api.systemVersion);
if(systemVersion>=6){
confirmPer(['storage']);
}
$api.fixStatusBar( $api.dom('header') );
api.setStatusBarStyle({
style: 'dark'
});
funIniGroup();
}
function funIniGroup(){
var eHeaderLis = $api.domAll('header li'),
frames = [];
for (var i = 0,len = eHeaderLis.length; i < len; i++) {
frames.push( {
name: 'frame'+i,
url: './html/frame'+i+'.html',
bgColor : '#f5f5f5',
bounces:false
} )
}
api.openFrameGroup({
name: 'group',
scrollEnabled: false,
rect: {
x: 0,
y: $api.dom('header').offsetHeight,
w: api.winWidth,
h: $api.dom('#main').offsetHeight
},
index: 0,
frames: frames
}, function (ret, err) {
});
}
// 随意切换按钮
function randomSwitchBtn( tag ) {
if( tag == $api.dom('#footer li.active') )return;
var eFootLis = $api.domAll('#footer li'),
eHeaderLis = $api.domAll('header li'),
index = 0;
for (var i = 0,len = eFootLis.length; i < len; i++) {
if( tag == eFootLis[i] ){
index = i;
}else{
$api.removeCls(eFootLis[i], 'active');
$api.removeCls(eHeaderLis[i], 'active');
}
}
$api.addCls( eFootLis[index], 'active');
$api.addCls( eHeaderLis[index], 'active');
api.setFrameGroupIndex({
name: 'group',
index: index
});
}
</script>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/web/vip_yingshi.git
git@gitee.com:web/vip_yingshi.git
web
vip_yingshi
vip_yingshi
master

搜索帮助