周六和后台同学进行了一下交接,做了一些代码上的调整,最主要的是主屏的布局由每一块一个div布局改为了iframe布局,以搜索界面为例:
之前搜索界面代码为:
<div class="slide w fl pr">
<div class="pa search">
<input type="text" id="search" value="" class="w" placeholder="请输入关键字" />
<i class="pa ns go-search" id="goSearch">◎</i>
<i class="pa ns back-search" id="backSearch">×</i>
<ul id="hot" class="ns">
<li>saasdfaasz</li>
<li>asadfsdasdd</li>
<li>aszxcdasdf</li>
<li>asdfsadfasd</li>
</ul>
</div>
</div>
现在代码为:
<div class="slide w fl pr">
<iframe class="w h" id="aftersearch" src="search.html" frameborder="0" scrolling="no"></iframe>
</div>
而search.html页面的信息为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>find</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="pa search">
<input type="text" id="search" value="" class="w" placeholder="请输入关键字" />
<i class="pa ns go-search" id="goSearch">◎</i>
<i class="pa ns back-search" id="backSearch">×</i>
<ul id="hot" class="ns">
<li>saasdfaasz</li>
<li>asadfsdasdd</li>
<li>aszxcdasdf</li>
<li>asdfsadfasd</li>
</ul>
</div>
<script>
function $(id){
return document.getElementById(id);
}
var hot = $('hot').getElementsByTagName('li');
for (var i = 0; i<hot.length; i++) {
hot[i].index = i;
hot[i].onmousedown = function(){
$('search').value = this.innerHTML;
$('goSearch').style.display = "block";
$('backSearch').style.display ="block";
}
}
var ifSearch = null;
$('search').onfocus = function(){
clearInterval(ifSearch);
$('search').placeholder = "";
ifSearch = setInterval(function(){
if($('search').value == ""){
$('goSearch').style.display = "none";
$('backSearch').style.display = "none";
}
else{
$('goSearch').style.display = "block";
$('backSearch').style.display ="block";
}
},10);
}
$('search').onblur = function(){
clearInterval(ifSearch);
$('search').placeholder = "请输入关键字";
if($('search').value == ""){
$('goSearch').style.display = "none";
$('backSearch').style.display = "none";
}
else{
$('goSearch').style.display = "block";
$('backSearch').style.display = "block";
}
}
$('backSearch').onclick = function(){
$('search').onfocus;
$('search').value = "";
$('goSearch').style.display = "none";
$('backSearch').style.display = "none";
}
</script>
</body>
</html>
可以看到js代码被移到了页面内部,而不是跟随首屏页index.html
其中最主要的是登录注册的布局,为了能够及完成js控制的左右滑动的布局又能够讲两个页面分开不同页面,用了两层的框架。首先将index里面用一层iframe来链接到login.html并将z-index的值置为最高
<iframe class="w h pa none" id="login" src="login.html" frameborder="0" scrolling="no" style="z-index:99999;"></iframe>
之后在login页面里套一个200%宽度的ul,并将登陆和注册的表单部分用另外两个框架来嵌套进去:
<ul class="sign h pa" id="sign">
<!-- 登录 -->
<li class="signin pa">
<div class="logo w ns" id="logo">
<img class="w" src="image/LOGO1.png" />
</div>
<iframe id="signin" src="signin.html" frameborder="0" scrolling="no" height="300px" width="100%"></iframe>
<i class="acc link ns"><p id="toSignup">没有账号? 加入我们> <br/>Dont have an account? Sign up</p></i>
</li>
<!-- 注册 -->
<li class="signup pa">
<div class="logo w ns" id="logo">
<img class="w ns" src="image/LOGO1.png" />
</div>
<iframe id="signup" src="signup.html" frameborder="0" scrolling="no" height="300px" width="100%"></iframe>
<i class="acc link ns"><p id="toSignin">已有账号? 返回登录<br/>Dont have an account? Sign up</p></i>
</li>
</ul>
之后便是详情页的一个介绍实现。
之间所说的遮罩,鼠标点击之后会消失,进而得到全屏的视频
上方隐藏的菜单鼠标移动上去会展开,并且显示加入团队或者加入收藏,加入收藏之后就可以在我的收藏里面找到团队简介。
下方的是一个video标签,将其控制器和进度条隐藏,并设置为循环播放,并设置为全屏。