这周剩下的工作完成了(我的)模块中的收藏和发现模块的布局以及一些简单的效果实现。
效果图如下:
上方的为止填入用户头像,点击可以调出设置界面,设置界面还没有布局完成,鼠标移上去会有如下变化:
这是一个动画效果,运用css3的动画就可以实现,具体代码实现如下:
<div class="head-banner pa">
<div class="pa head">
<div class="pa head-inner">
</div>
</div>
<div class="mine-banner pa">
<div class="pa">
<span class="focus" id="toFir">收藏团队</span>
<span id="toSec">我的团队</span>
</div>
</div>
</div>
css部分:
div.head-banner {
left: 50%;
opacity: 0.8;
transition: opacity 0.3s;
z-index: 101;
height: 120px;
}
div.head-banner:hover {
opacity: 1;
}
div.head {
left: 0px;
top: 5px;
margin-left: -50px;
background-color: #DEE1E2;
box-shadow: 0 0 10px #bbb;
display: inline-block;
width: 100px;
height: 100px;
z-index: 100;
border-radius: 50px;
}
div.head>div.head-inner {
top: 10px;
left: 10px;
height: 80px;
width: 80px;
border-radius: 40px;
z-index: 102;
background-image: url(../image/logo1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
div.mine-banner>div>span.focus {
color: #648b98;
}
div.mine-banner {
text-align: center;
overflow: hidden;
background-color: #DdE0E1;
color: #999;
z-index: 99;
height: 50px;
border-radius: 25px;
width: 0;
left: 0;
top: 30px;
margin-left: 0;
box-shadow: 0 0 10px #ccc;
transition:
width 0.3s,
margin-left 0.3s;
}
div.head-banner:hover>div.mine-banner {
width: 420px;
margin-left: -208px;
}
div.mine-banner>div {
left: 50%;
width: 500px;
margin-left: -250px;
}
div.mine-banner>div>span {
display: inline-block;
float: left;
font-size: 20px;
font-family: robot;
line-height: 50px;
cursor: pointer;
width: 50%;;
}
点击之后可以滑动到右侧的设置界面,但现在也没有布局好。
收藏团队的页面是一个团队的展示界面,用了一个百分比的布局,每行展示三个团队的简介。鼠标移上去下面半个黑色的遮罩框可以抬起完全显示简介。
附代码部分:
html:
<div class="h w pa mine" id="mine">
<div class="h car" id="car">
<div class="find" id="carInner">
<ul class="w">
<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 class="h service pr">
<div class="window pa">
<div class="w">
<ul class="fir">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="sec">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input type="text" class="pr" />
<button class="pa">发送</button>
</div>
</div>
</div>
css:
div.mine {
z-index: 98;
top: 0;
left: 0;
overflow: hidden;
width: 200%;
}
div.mine>div {
width: 50%;
float: left;
}
div.mine>div.car>div.find {
margin: 100px 60px;
margin-bottom: 0;
}
div.service>div.window {
width: 80%;
left: 10%;
top: 50%;
margin: -250px 0 0 0;
height: 500px;
}
div.service>div.window>div {
height: 440px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 0 10px #999 inset;
overflow-y: scroll;
}
div.service>div.window>div>ul {
width: 50%;
height: 100%;
float: left;
}
div.service>div.window>div>ul.fir>li {
float: left;
margin: 10px 20px 60px;
background-color: #ccc;
}
div.service>div.window>div>ul.sec>li {
float: right;
margin: 60px 20px 10px;
color: white;
background-color: #648b98;
}
div.service>div.window>div>ul>li {
position: relative;
clear: both;
padding: 16px 40px 16px 20px;
border-radius: 10px;
}
div.service>div.window>input {
margin: 10px 0 0 0;
height: 50px;
width: 100%;
border-style: none;
border-radius: 10px;
text-indent: 10px;
font-size: 16px;
}
div.service>div.window>button {
bottom: 0;
right: 0;
background-color: #648b98;
color: white;
float: right;
border-style: none;
line-height: 50px;
font-size: 16px;
height: 50px;
width: 100px;
border-radius: 10px;
cursor: pointer;
}
其中内部内容我做了一个判断,当简介内容超过预览图大小所能承受范围的话,添加滚动条。
js部分为如下所示:
if($('carInner').offsetHeight - $('car').offsetHeight > 0 ){
$('car').style.overflowY = "scroll";
}
明天能够把首屏的零散部件给写完,之后后端开始逐渐跟进,同时开始做团队页面。