together项目进展报告4

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

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

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

代码如下所示

    
推荐
    
发现
    
搜索
    
我的
    
关于

其中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浏览器。

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

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

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

    
    

        

            
        
        

            

            
            忘记密码?   Forget your password?

            登     录
            使 用 Q Q 号 登 录

            
没有账号？ 加入我们> 
Dont have an account? Sign up
       
    
    
    

        

            
        
        

            使 用 Q Q 号 登 录

            或者 OR

            
            

            创 建 账 号

            
已有账号？ 返回登录
Dont have an account? Sign up
       
    

其中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);
}

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