together项目进展报告4

上次更新写到了首屏轮播图的实现与优化，到现在为止，更新了一些另外的内容，包括侧边banner的滑动效果、登录注册界面的设计，布局，以及部分js代码的实现。

首先是侧边banner栏的滑动实现

侧边栏的选项为一个ul列表，为了让用户明确现在所处的位置，我将所示的栏目的选项定义一个类"listfoc",并将其color值设为了主色调 #648b98

代码如下所示

<ul class="list ns" id="list">
    <li class="listfoc">推荐</li>
    <li>发现</li>
    <li>搜索</li>
    <li>我的</li>
    <li>关于</li>
</ul>

其中listfoc和ns类如下所示，ns类的得单独列出是为了让用户无法选取可能会误选的文字或图片，减少会影响交互体验的操作。

.list>li.listfoc {
    color: #648b98;
}
.ns {
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    draggable: false;
}

值得一提的是user-select属性经测试无法支持ie浏览器。

接下来就是登录和注册界面的实现了。

登录和注册界面的构想图为如下所示

实际实现的效果和图中基本一致，同时为了保持网站风格一致，扥古和注册的切换不是切换页面，而是用滑动来表现出来。下面为两个的代码

<!-- 登录/注册 若已经登录将其class设为none -->
<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>
        <form class="w signin-form">
            <input type="email" placeholder="请输入电子邮箱" />

            <input type="password" placeholder="请输入密码" />
            <a href="#" class="cb fr ns">忘记密码?   Forget your password?</a>

            <button type="button" class="fir ns">登     录</button>
            <button type="button" class="sec ns">使 用 Q Q 号 登 录</button>

            <i class="acc link ns"><p id="toSignup">没有账号？ 加入我们> <br/>Dont have an account? Sign up</p></i>
       </form>
    </li>
    <!-- 注册 -->
    <li class="signup pa">
        <div class="logo w ns" id="logo">
            <img class="w ns" src="image/LOGO1.png" />
        </div>
        <form class="w signin-form">
            <button type="button" class="sec ns">使 用 Q Q 号 登 录</button>

            <i class="acc ns">或者 OR</i>

            <input type="email" placeholder="请输入电子邮箱" />
            <input type="password" placeholder="请输入密码" />

            <button type="button" class="fir ns">创 建 账 号</button>

            <i class="acc link ns"><p id="toSignin">已有账号？ 返回登录<br/>Dont have an account? Sign up</p></i>
       </form>
    </li>
</ul>

其中ul为200%的宽度值，z-index值为100，当用户已经注册和登录的情况下，将ul的display属性设置为"none"即可。

以下为两者切换的js部分代码

$('toSignup').onclick = function(){
    var oSign = 0;
    clearInterval(oGo);
    oGo = setInterval(function(){
        oSign += (100 - oSign)/10;
        if(oSign%100 < 0.05){
            oSign = Math.round(oSign);
            $('sign').style.left = "-"+oSign+"%";
            clearInterval(oGo);
        }
        else{
            $('sign').style.left = "-"+oSign+"%";
        }
    },10);
}
$('toSignin').onclick = function(){
    var oSign = 100;
    clearInterval(oGo);
    oGo = setInterval(function(){
        oSign += (0 - oSign)/10;
        if(oSign%100 < 0.05){
            oSign = Math.round(oSign);
            $('sign').style.left = "-"+oSign+"%";
            clearInterval(oGo);
        }
        else{
            $('sign').style.left = "-"+oSign+"%";
        }
    },10);
}

目前工作量到这里，进度还算顺利，继续努力。