这周至现在完成了一些搜索页面相关的任务,搜索界面设计如下图
可以看到,未输入之前仅有一条平直的线和请输入关键字的提示。,担当点击输入框时,会弹出输入的光标,“请输入关键字”则会消失。当输入框内有内容时,输入的内容会变深色。并且输入框左右会有两个标志,左边的叉点击可以清空当前输入的值。右边的双圆圈点击可以搜索。
下方的关键字推荐,鼠标移上去会变大,染色也会变深,点击的话会在搜索框内显示所点击的关键词,可以搜索或修改之后再搜索。
下面是搜索部分的代码:
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;
}
目前为止工作量大概这么多,这周尽快将基本框架搭出来,后台就可以同步来进行了。