together项目进度报告8

最新推荐文章于 2020-12-21 11:13:42 发布

DesGuan

最新推荐文章于 2020-12-21 11:13:42 发布

阅读量337

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/DesGuan/article/details/72860310

本文介绍了前端页面从div布局调整为iframe布局的过程，包括搜索界面重构、登录注册模块的交互优化，以及使用JavaScript进行元素控制的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

周六和后台同学进行了一下交接，做了一些代码上的调整，最主要的是主屏的布局由每一块一个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>

之后便是详情页的一个介绍实现。

之间所说的遮罩，鼠标点击之后会消失，进而得到全屏的视频

上方隐藏的菜单鼠标移动上去会展开，并且显示加入团队或者加入收藏，加入收藏之后就可以在我的收藏里面找到团队简介。