together项目进度报告5

这周至现在完成了一些搜索页面相关的任务，搜索界面设计如下图

可以看到，未输入之前仅有一条平直的线和请输入关键字的提示。，担当点击输入框时，会弹出输入的光标，“请输入关键字”则会消失。当输入框内有内容时，输入的内容会变深色。并且输入框左右会有两个标志，左边的叉点击可以清空当前输入的值。右边的双圆圈点击可以搜索。

下方的关键字推荐，鼠标移上去会变大，染色也会变深，点击的话会在搜索框内显示所点击的关键词，可以搜索或修改之后再搜索。

下面是搜索部分的代码：

html：

<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>

css：

div.search {
    top: 50%;
    left: 50%;
    width: 600px;
    overflow: hidden;
    margin: -50px 0 0 -300px;
}
div.search>input {
    border-style: none;
    background-color: #DEE1E2;
    line-height: 50px;
    text-align: center;
    font-family: robot;
    font-size: 20px;
    border-bottom: 3px solid #999;
    outline-style: none;
    /*padding-left: 10px;*/
}
div.search>i {
    top: 0;
    display: none;
    font-style: normal;
    text-align: center;
    color: #777;
    line-height: 50px;
    width: 50px;
    cursor: pointer;
}
div.search>i.go-search {
    right: 0;
    font-size: 50px;
}
div.search>i.back-search {
    left: 0;
    font-size: 35px;
}
div.search>ul {
    text-align: center;
    overflow-x: visible;
}
div.search>ul>li {
    line-height: 25px;
    font-size: 18px;
    font-family: robot;
    float: left;
    color: #999;
    width: 21%;
    margin: 2%;
    cursor: pointer;
    overflow: visible;
    transition: 
        font-size 0.3s,
        color 0.3s;
}
div.search>ul>li:hover {
    font-size: 21px;
    color: #555;
}

搜索主要是通过js代码来实现：

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";

}

除此之外，发现的页面正在制作过程中，但还未完成，以下是部分html代码：

<div class="slide w fl pr">
    <div class="w h" id="find">
        <div class="w find" id="findInner">
            <ul class="w" id="synopsis">
                <li><span>
                       <!--若内容超出div则自动加入滚动条-->
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
                <li><span>
                        <h1></h1>
                    </span></li>
            </ul>
            <div class="cb ns w" id="last">
                正在加载...
            </div>
        </div>
    </div>
</div>

每个展示的框内都有一个标题<h1>标签和一段简介。

当简介长度超过li的长度时。自动在内部生成滚动框。滚动框样式被修改，以下是滚动框的样式：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 8px;
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{   
    border-radius: 5px;  
    background-color: rgba(0,0,0,0);  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 5px;
    background-color: #666;  
}  

目前为止工作量大概这么多，这周尽快将基本框架搭出来，后台就可以同步来进行了。