Difference between revisions of "Team:Tongji-Software"

Line 1: Line 1:
−
<!doctype html>
+
<!DOCTYPE html>
−
<html lang="en" class="fullHeight">
+
<html lang="en">
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
−
     <title>demo</title>
+
     <title>sideBar demo</title>
−
     <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software//lib/T--Tongji-Software--sidebar.css&action=raw&ctype=text/css">
+
     <link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software//lib/T--Tongji-Software--sidebar.css&action=raw&ctype=text/css">
 +
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
 +
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap-theme.css">
 
</head>
 
</head>
−
<style>
+
<body>
−
/**************************************************************************************************************************************************************************************************/
+
    <div id = "sidebar">
−
 
+
        <ul>
−
 
+
            <li id="prof" class="item">
−
 
+
                <span class="glyphicon glyphicon-user"></span>
−
/**************************************************************************************************************************************************************************************************/
+
                <div>我</div>
−
/* DEFAULT WIKI SETTINGS */
+
            </li>
−
/**************************************************************************************************************************************************************************************************/
+
            <li id="asset" class="item">
−
 
+
                <span class="glyphicon glyphicon-user"></span>
−
 
+
                <div>资产</div>
−
#home_logo, #sideMenu { display:none; }
+
            </li>
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
            <li id="brand" class="item">
−
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
                <span class="glyphicon glyphicon-user"></span>
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
                <div>商品</div>
−
 
+
            </li>
−
 
+
            <li id="foot" class="item">
−
 
+
                <span class="glyphicon glyphicon-user"></span>
−
/* 动画定义 */
+
                <div>足迹</div>
−
@-webkit-keyframes move_right {
+
            </li>
−
    from {
+
            <li id="calender" class="item">
−
        opacity: 0;
+
                <span class="glyphicon glyphicon-user"></span>
−
    }
+
                <div>日历</div>
−
    to {
+
             </li>
−
        opacity: 1;
+
        </ul>
−
        -webkit-transform: translateX(120px);
+
        <div id="closeBar">
−
        transform: translateX(120px);
+
             <span class="glyphicon glyphicon-remove"></span>
−
    }
+
−
}
+
−
@keyframes move_right {
+
−
    from {
+
−
        opacity: 0;
+
−
    }
+
−
    to {
+
−
        opacity: 1;
+
−
        -webkit-transform: translateX(120px);
+
−
        transform: translateX(120px);
+
−
    }
+
−
}
+
−
@-webkit-keyframes move_left {
+
−
    from {
+
−
        opacity: 1;
+
−
    }
+
−
    to {
+
−
        opacity: 0;
+
−
        -webkit-transform: translateX(-120px);
+
−
        transform: translateX(-120px);
+
−
    }
+
−
}
+
−
@keyframes move_left {
+
−
    from {
+
−
        opacity: 1;
+
−
    }
+
−
    to {
+
−
        opacity: 0;
+
−
        -webkit-transform: translateX(-120px);
+
−
        transform: translateX(-120px);
+
−
    }
+
−
}
+
−
@-webkit-keyframes move_up {
+
−
    from {
+
−
        opacity: 0;
+
−
    }
+
−
    to {
+
−
        opacity: 1;
+
−
        -webkit-transform: translateY(-250px);
+
−
        transform: translateY(-250px);
+
−
    }
+
−
}
+
−
@keyframes move_up {
+
−
    from {
+
−
        opacity: 0;
+
−
    }
+
−
    to {
+
−
        opacity: 1;
+
−
        -webkit-transform: translateY(-250px);
+
−
        transform: translateY(-250px);
+
−
    }
+
−
}
+
−
 
+
−
/* 动画绑定 */
+
−
.move_right {
+
−
    -webkit-animation-name            : move_right;
+
−
    animation-name            : move_right;
+
−
    -webkit-animation-duration        : 1s;
+
−
    animation-duration        : 1s;
+
−
    -webkit-animation-iteration-count : 1;
+
−
    animation-iteration-count : 1;
+
−
    -webkit-animation-fill-mode : forwards;
+
−
    animation-fill-mode : forwards;
+
−
}
+
−
.move_left {
+
−
    -webkit-animation-name            : move_left;
+
−
    animation-name            : move_left;
+
−
    -webkit-animation-duration        : 1s;
+
−
    animation-duration        : 1s;
+
−
    -webkit-animation-iteration-count : 1;
+
−
    animation-iteration-count : 1;
+
−
    -webkit-animation-fill-mode : forwards;
+
−
    animation-fill-mode : forwards;
+
−
}
+
−
.move_up {
+
−
    -webkit-animation-name            : move_up;
+
−
    animation-name            : move_up;
+
−
    -webkit-animation-duration        : 1s;
+
−
    animation-duration        : 1s;
+
−
    -webkit-animation-iteration-count : 1;
+
−
    animation-iteration-count : 1;
+
−
    -webkit-animation-fill-mode : forwards;
+
−
    animation-fill-mode : forwards;
+
−
}
+
−
.fadeIn {
+
−
    -webkit-transform : translateX(120px);
+
−
    transform : translateX(120px);
+
−
    opacity: 1;
+
−
}
+
−
.fadeInUp {
+
−
    -webkit-transform : translateY(-250px);
+
−
    transform : translateY(-250px);
+
−
    opacity: 1;
+
−
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
+
−
    transition :transform .2s ease-out, opacity .2s ease-out;
+
−
}
+
−
.fadeOutLeft {
+
−
    -webkit-transform : translateX(-120px);
+
−
    transform : translateX(-120px);
+
−
    opacity: 0.0;
+
−
    -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
+
−
    transition :transform .2s ease-out, opacity .2s ease-out;
+
−
}
+
−
</style>
+
−
<body class="fullHeight">
+
−
    <div class='sidebar fullHeight'>sidebar</div>
+
−
    <div class="controller">
+
−
        <div>
+
−
             <button onclick="fadeIn()">淡进</button>
+
−
             <button onclick="fadeOut()">淡出</button>
+
 
         </div>
 
         </div>
−
         <div>
+
    </div>
−
             <button onclick="fadeInUp()">向上淡进</button>
+
    <div class="nav-content" id="prof-content">
−
             <button onclick="fadeOutLeft()">向左淡出</button>
+
         <div class="nav-con-close">
 +
             <span class="glyphicon glyphicon-chevron-left"></span>
 +
        </div>
 +
        <div>我</div>
 +
    </div>
 +
    <div class="nav-content" id="asset-content">
 +
        <div class="nav-con-close">
 +
            <span class="glyphicon glyphicon-chevron-left"></span>
 +
        </div>
 +
        <div>资产</div>
 +
    </div>
 +
    <div class="nav-content" id="brand-content">
 +
        <div class="nav-con-close">
 +
            <span class="glyphicon glyphicon-chevron-left"></span>
 +
        </div>
 +
        <div>商标</div>
 +
    </div>
 +
    <div class="nav-content" id="foot-content">
 +
        <div class="nav-con-close">
 +
            <span class="glyphicon glyphicon-chevron-left"></span>
 +
        </div>
 +
        <div>足迹</div>
 +
    </div>
 +
    <div class="nav-content" id="calender-content">
 +
        <div class="nav-con-close">
 +
             <span class="glyphicon glyphicon-chevron-left"></span>
 
         </div>
 
         </div>
 +
        <div>日历</div>
 
     </div>
 
     </div>
−
     <script src="sidebarEffects.js"></script>
+
     <script src="https://2018.igem.org/wiki/index.php?title=Template:Tongji-Software//lib/T--Tongji-Software--sidebar.js&action=raw&ctype=text/javascript"></script>
 
</body>
 
</body>
−
 
−
<script>
 
−
var sidebarEl = document.querySelector(".sidebar");
 
−
 
−
function fadeIn (e) {
 
−
    sidebarEl.className = 'sidebar fullHeight';
 
−
    sidebarEl.style.top = '0px';
 
−
    sidebarEl.style.left = '0px';
 
−
    sidebarEl.classList.add('move_right');
 
−
}
 
−
function fadeOut (e) {
 
−
    sidebarEl.className = 'sidebar fullHeight';
 
−
    sidebarEl.style.left = '120px';
 
−
    sidebarEl.classList.add('move_left');
 
−
}
 
−
function fadeInUp(e) {
 
−
    sidebarEl.className = 'sidebar fullHeight';
 
−
    sidebarEl.style.top = '250px';
 
−
    sidebarEl.style.left = '120px';
 
−
    sidebarEl.classList.add('move_up');
 
−
 
−
}
 
−
function fadeOutLeft(e) {
 
−
    sidebarEl.className = 'sidebar fullHeight';
 
−
    sidebarEl.style.top = '0px';
 
−
    sidebarEl.style.left = '120px';
 
−
    sidebarEl.classList.add('move_left');
 
−
 
−
}
 
−
</script>
 
 
</html>
 
</html>

Revision as of 09:05, 7 October 2018

<!DOCTYPE html> sideBar demo

我
资产
商标
足迹
日历