oj废弃主页的设计[滑动按钮]_neu online judge-优快云博客

本文介绍了一个在线评测系统的首页设计与实现过程，包括HTML结构布局、使用JavaScript完成的菜单动画效果及CSS样式设置等内容。

//index.blade.php
<!doctype html>
<html>
<head>
    <title>Welcome come to NEU online judge</title>
    @include("layout.head")
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/home.js"></script>
</head>
<body class="home_body">
    <div class="home_logo"><img src="/image/neuonlinejudge.png"><div>
    <div class="text-center"><span class="text-success home_text"><kbd>talk is cheap,show me the code </kbd></span></div>
     <div class="dropdownmenu">
         <a class="btn home_button" type="button" id="home_btn">开启旅程 »</a>
        <ul role="menu">
            <li><a role="menuitem" class="btn home_button" href="/problem">Problems</a></li>
            <li><a role="menuitem" class="btn home_button" href="#">NEUACM</a></li>
            <li><a role="menuitem" class="btn home_button" href="#">Donate</a></li>
            <li><a role="menuitem" class="btn home_button" href="#">More</a></li>
            <input id="hidval" type="hidden" value="0"/>
        </ul>
     </div>
</body>
</html>

//home.js 对应的js
$(function(){
        $("#home_btn").bind("click",function(){
            if($("#hidval").val()==0){
                $("#hidval").val(1);
                $(".dropdownmenu li:eq(0)").animate({
                    left:"-=300px",
                    top:"+=100px",
                    opacity:1},500
                );
                $(".dropdownmenu li:eq(1)").animate({
                    left:"-=100px",
                    top:"+=100px",
                    opacity:1},500
                );
                $(".dropdownmenu li:eq(2)").animate({
                    left:"+=100px",
                    top:"+=100px",
                    opacity:1},500
                );
                $(".dropdownmenu li:eq(3)").animate({
                    left:"+=300px",
                    top:"+=100px",
                    opacity:1},500
                );
            }else{
                $("#hidval").val(0);
                $(".dropdownmenu li:eq(0)").animate({
                    left:"+=300px",
                    top:"-=100px",
                    opacity:0},500
                );
                $(".dropdownmenu li:eq(1)").animate({
                    left:"+=100px",
                    top:"-=100px",
                    opacity:0},500
                );
                $(".dropdownmenu li:eq(2)").animate({
                    left:"-=100px",
                    top:"-=100px",
                    opacity:0},500
                );
                $(".dropdownmenu li:eq(3)").animate({
                    left:"-=300px",
                    top:"-=100px",
                    opacity:0},500
                );
            }
        })


})

<pre name="code" class="html">/*主页*/
.home_body{
    background-image: linear-gradient(to bottom, #63B8FF, #a6e1ec);
    overflow: hidden;
}
.home_logo{
    position: relative;
    width: 700px;
    margin: 0 auto;
    margin-top: 10%;
}
.home_logo>img{
    width: 100%;
}
.home_text{
    font-size: 30px;
}
.dropdownmenu{
    width: 150px;
    padding-top: 150px;
    marigin:0;
    margin: 0 auto;
}
.dropdownmenu>ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin: 0 auto;
    position: relative;
}
#home_btn{
    z-index: 9;
    position: relative;
}
.dropdownmenu>ul>li{
    opacity:0;
    position: absolute;
    top:-50px;
    width: 100px;
}

.home_button{
    width: 150px;
    height: 50px;
    border: 1px solid white;
    background: rgba(0,0,0,0);
    display: table-cell;
    vertical-align: middle;
}

页面还可以,但是经过大家的否认,那我就进行修改了