together项目进展报告4

最新推荐文章于 2025-04-26 01:00:00 发布

DesGuan

最新推荐文章于 2025-04-26 01:00:00 发布

阅读量312

点赞数

本文链接：https://blog.youkuaiyun.com/DesGuan/article/details/72592468

版权

本文介绍了网站侧边栏的滑动效果实现及登录注册界面的设计与布局。通过CSS样式控制侧边栏选中状态，并利用JavaScript实现登录与注册界面间的平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次更新写到了首屏轮播图的实现与优化，到现在为止，更新了一些另外的内容，包括侧边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);
}

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