Difference between revisions of "Team:Jilin China"

Line 1: Line 1:
 
{{:Team:Jilin_China/partofBs_CSS}}
 
{{:Team:Jilin_China/partofBs_CSS}}
 +
{{:Team:Jilin_China/Description_cont}}
 +
 
<html>
 
<html>
 +
 +
 +
 +
<script>
 +
function $$(id){
 +
var el=document.getElementById(id);
 +
return el;
 +
}
 +
function $C$(Class){
 +
var el=document.getElementsByClassName(Class);
 +
return el;
 +
}
 +
function $T$(Tag){
 +
    var el=document.getElementsByTagName(Tag);
 +
    return el;
 +
}
 +
 +
function getChildNodes(el, tagName) {
 +
        var nodes = [];
 +
        for (var i = 0; i < el.childNodes.length; i++){
 +
            if (el.childNodes[i].tagName == tagName) nodes.push(el.childNodes[i]);
 +
          }
 +
        return nodes;
 +
}
 +
 +
 +
function scrollTopNow(){
 +
  var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 
 +
  return scrolltop;
 +
}
 +
//有关类名字的方法
 +
function addClass(el, className) {
 +
    if (hasClass(el, className)) {
 +
    return;
 +
    }
 +
    let newClass = el.className.split(' ');
 +
    newClass.push(className);
 +
    el.className = newClass.join(' ');
 +
}
 +
 +
function hasClass(el, className) {
 +
      // \s匹配任何空白字符，包括空格、制表符、换页符等等
 +
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
 +
    return reg.test(el.className);
 +
    }
 +
function removeClass(el, className){
 +
    if (!hasClass(el, className)) {
 +
        return;
 +
    }
 +
    let newClass = el.className.split(' ');
 +
    newClass.forEach(function(val, index, newClass){
 +
    if(val === className){
 +
        newClass.splice(index,1);
 +
    }
 +
    }) ;
 +
    el.className = newClass.join(' ');
 +
}
 +
 +
//获取屏幕上滚高度
 +
 +
 +
</script>
 +
 
<style>
 
<style>
 +
 +
.word {
 +
color: rgba(0,0,0,1.00);
 +
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
 +
}
 +
  p{
 +
width: 90%;
 +
height: auto;
 +
margin: 0 auto;
 +
position: relative;
 +
  }
 +
  div{
 +
    width: auto;
 +
    height: auto;
 +
    position: relative;
 +
  }
 +
tbody{
 +
width:50%;
 +
position: relative;
 +
}
 +
 
 +
#HQ_page .np1{
 +
color: rgba(0,0,0,1.00);
 +
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
 +
font-size: 39px;
 +
padding-bottom: 25px;
 +
padding-top: 25px;
 +
  }
 +
#HQ_page .np3 {
 +
font-size: 26px;
 +
margin-bottom: 13px;
 +
}
 +
 +
#HQ_page .np5{
 +
font-size: 19px;
 +
line-height: 31px;
 +
margin-bottom: 13px;
 +
  }
 +
 +
 +
 +
 +
.picCont{
 +
width: 85%;
 +
margin-top: 0;
 +
margin-right: auto;
 +
margin-left: auto;
 +
margin-bottom: 14px;
 +
height: auto;
 +
overflow: hidden;
 +
    }
 +
.picCont .pic{
 +
width: 300px;
 +
height: 500px;
 +
float: left;
 +
margin-bottom: 0px;
 +
background-position: center 0%;
 +
overflow-x: hidden;
 +
overflow-y: hidden;
 +
background-size: 100% auto;
 +
background-repeat: no-repeat;
 +
  }
 +
.picCont .pic .picinner {
 +
height: 10%;
 +
width: 100%;
 +
background-color: rgba(0,227,202,0.79);
 +
position: relative;
 +
top: -10%;
 +
}
 +
.picCont .picword{
 +
position: absolute;
 +
float: left;
 +
width: 100%;
 +
text-align: center;
 +
height: 100%;
 +
  }
 +
.tableCont  {
 +
display: block;
 +
height: auto;
 +
margin: 0 auto;
 +
width: 85%;
 +
overflow-x: hidden;
 +
overflow-y: hidden;
 +
}
 +
.tableCont table {
 +
height: auto;
 +
display: block;
 +
border-collapse: collapse;
 +
position: relative;
 +
float: left;
 +
text-align: center;
 +
margin-top: 30px;
 +
}
 +
.tableCont table tbody {
 +
display: block;
 +
width: auto;
 +
height: auto;
 +
}
 +
.tableCont .table .tableinner {
 +
height: 39px;
 +
width: 100%;
 +
font-size: 18px;
 +
line-height: 31px;
 +
}
 +
.tableCont table tbody tr:nth-child(2n)  {
 +
background-color: rgba(212,234,249,1.00);
 +
 +
}
 +
.tableCont table tbody tr:nth-child(2n+1)  {
 +
background-color: rgba(220,239,252,1.00);
 +
 +
}
 +
.tableCont table tbody tr:first-child {
 +
background-color: rgba(159,217,255,1.00);
 +
 +
}
 +
 +
tbody td {
 +
border: 1px solid rgba(64,137,251,1.00);
 +
width: 1000px;
 +
height: 37px;
 +
}
 +
 +
 
#top_title{
 
#top_title{
 
     display: none;
 
     display: none;
Line 11: Line 200:
 
padding:00;
 
padding:00;
 
}
 
}
 +
/**
 +
*
 +
* @authors lhx(you@example.org)
 +
* @date    2019-03-02 10:23:22
 +
* @version $Id$
 +
*/
 
body{
 
body{
 
margin: 0 auto;
 
margin: 0 auto;
 
}
 
}
 +
 +
/**
 +
* 菜单的
 +
*/
 +
 +
#bg_menu {
 +
margin-top: 18px;
 +
display: block;
 +
background-color: rgba(65,4,1,1.00);
 +
position: fixed;
 +
text-align: center;
 +
bottom: 85px;
 +
right: 10%;
 +
z-index: 999;
 +
line-height: 57px;
 +
width: 60px;
 +
height: 60px;
 +
}
 +
#bg_menu #menu_0 {
 +
margin-top: 18px;
 +
display: none;
 +
/* [disabled]background-color: gold; */
 +
position: absolute;
 +
text-align: center;
 +
line-height: 50px;
 +
z-index: 999;
 +
height: 500px;
 +
width: 700px;
 +
bottom: 0px;
 +
right: 0px;
 +
transform-origin: 100% 100% 0;
 +
transform: scale(0,0);
 +
transition: .3s ease;
 +
}
 +
#bg_menu  #menu_1  {
 +
width: 200px;
 +
position: absolute;
 +
left: 0px;
 +
bottom: 0px;
 +
background-color: rgba(65,4,3,1.00);
 +
height: 100%;
 +
display: block;
 +
transform: translate(200px,0px);
 +
transition: .5s ease;
 +
}
 +
#bg_menu  #menu_2  {
 +
width: 500px;
 +
position: absolute;
 +
bottom: 0px;
 +
background-color: rgba(205,205,205,1.00);
 +
height: 100%;
 +
right: 0px;
 +
}
 +
#menu_0 #menu_2 #menu_2_title_0 {
 +
width: 500px;
 +
position: relative;
 +
background-color: rgba(107,47,255,1.00);
 +
height: 50px;
 +
}
 +
#menu_2 #menu_2_title_0 #m_2_t_0_0 {
 +
width: 50%;
 +
position: absolute;
 +
left: 0px;
 +
height: 100%;
 +
background-color: rgba(255,255,255,1.00);
 +
top: 0px;
 +
}
 +
.menu_inner_block {
 +
cursor: pointer;
 +
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
 +
color: rgba(255,134,0,1.00);
 +
}
 +
 +
#menu_2 #menu_2_title_0 #m_2_t_0_1 {
 +
width: 50%;
 +
position: absolute;
 +
height: 100%;
 +
background-color: rgba(65,4,3,1.00);
 +
right: 0px;
 +
top: 0px;
 +
}
 +
 +
#menu_0 #menu_2 #menu_2_block_0 {
 +
background-color: hsla(44,100%,80%,1.00);
 +
width: 500px;
 +
position: relative;
 +
height: 210px;
 +
}
 +
.menulink {
 +
color: hsla(1,94%,13%,1.00);
 +
font-size: 21px;
 +
border-width: thin;
 +
border-style: solid none none;
 +
}
 +
 +
 +
#menu_0 #menu_2 #menu_2_title_1 {
 +
width: 500px;
 +
position: relative;
 +
background-color: rgba(255,255,255,1.00);
 +
height: 50px;
 +
font-size: 18px;
 +
}
 +
 +
#menu_0 #menu_2 #menu_2_block_1 {
 +
background-color: rgba(255,228,153,1.00);
 +
width: 500px;
 +
position: relative;
 +
height: 130px;
 +
}
 +
#menu_0 #menu_2 #menu_2_title_2 {
 +
width: 500px;
 +
position: relative;
 +
background-color: rgba(65,187,147,1.00);
 +
height: 60px;
 +
}
 +
#menu_2 #menu_2_title_2 #m_2_t_2_0 {
 +
width: 440px;
 +
height: 60px;
 +
background-color: rgba(255,255,255,1.00);
 +
position: absolute;
 +
bottom: 0px;
 +
font-size: 30px;
 +
line-height: 60px;
 +
left: 0px;
 +
}
 +
#menu_2 #menu_2_title_2 #m_2_t_2_1 {
 +
width: 60px;
 +
height: 60px;
 +
background-color: rgba(0,0,0,1.00);
 +
position: absolute;
 +
right: 0px;
 +
bottom: 0px;
 +
font-size: 30px;
 +
line-height: 60px;
 +
}
 +
 +
#m_2_t_2_1 span  {
 +
width: 60px;
 +
height: 60px;
 +
display: block;
 +
}
 +
 +
 +
 +
 +
 +
 +
  
  
Line 23: Line 367:
 
padding-right: 0;
 
padding-right: 0;
 
background-color: #fff;
 
background-color: #fff;
−
  margin: 0;
+
margin: 0;
−
  height:0px;
+
height: 0px;
−
  z-index: 999;
+
z-index: 999;
−
  position: relative;
+
position: relative;
 +
color: rgba(255,255,255,1.00);
 +
width: 100%;
 
}
 
}
 +
 +
 
#first_s #nav_bg{
 
#first_s #nav_bg{
−
  height: 80px;
+
height: 80px;
 +
color: rgba(255,255,255,1.00);
 +
transition: 0.5s;
 
}
 
}
 
#first_s .container {
 
#first_s .container {
−
  height: 80px;
+
height: 80px;
 +
color: rgba(255,255,255,1.00);
 
}
 
}
 
#first_s .container .navbar-header {
 
#first_s .container .navbar-header {
Line 39: Line 390:
 
}
 
}
 
#first_s .container .navbar-brand {
 
#first_s .container .navbar-brand {
−
  font-size: 24px;
+
font-size: 24px;
−
  line-height: 72px;
+
line-height: 72px;
 +
color: rgba(65,4,3,1.00);
 
}
 
}
 
#first_s .container ul {
 
#first_s .container ul {
−
  text-align: center;
+
padding: 0 0;
−
  padding: 0 0;
+
margin: 0 0;
−
  margin:0 0;  
+
height: 80px;
−
  height: 80px;
+
float: right;
−
  float: right;
+
font-size: 18px;
−
  font-size: 18px;
+
color: #FFFFFF;
−
  color: #c0c0c0;
+
}
 +
#first_s .container a {
 +
padding: 0 0;
 +
margin: 0 0;
 +
height: 80px;
 +
font-size: 18px;
 +
color: #410403;
 +
font-weight: bold;
 
}
 
}
  
  
 
#first_s .container  li
 
#first_s .container  li
−
{  
+
{
−
  width: 80px;
+
width: 116px;
−
  list-style: none;
+
list-style: none;
 
height: 80px;
 
height: 80px;
 
line-height: 80px;
 
line-height: 80px;
 
float: left;
 
float: left;
−
  color: #c0c0c0;
+
color: #CC992C;
 +
text-align: center;
 +
position: relative;
 
}
 
}
  
Line 67: Line 428:
 
#first_s .container  li ul  
 
#first_s .container  li ul  
 
{
 
{
−
  list-style: none;
+
list-style: none;
−
  padding-left: 0;
+
padding-left: 0;
−
  text-align: center;
+
text-align: center;
−
  position: relative;
+
position: absolute;
−
  display: none;
+
display: none;
−
 
+
height: auto;
 
}
 
}
  
−
#first_s .container  li:hover > ul
+
/*#first_s .container  li:hover > ul
 
{
 
{
−
display: block;  
+
display: block;
−
}
+
}*/
  
  
 
#first_s .container  li ul li
 
#first_s .container  li ul li
 
{
 
{
−
  height: 30px;
+
height: 45px;
−
  padding-top: 0px;
+
padding-top: 0px;
−
  padding-bottom: 0px;
+
padding-bottom: 0px;
−
  line-height: 30px;
+
line-height: 53px;
−
  position: relative;
+
position: absolute;
−
 
+
background-color: rgba(0,0,0,1.00);
 +
top: 0px;
 +
opacity: 0;
 
}
 
}
  
Line 100: Line 463:
 
#first_s .container  li ul li li
 
#first_s .container  li ul li li
 
{
 
{
−
  height: 30px;
+
height: 45px;
−
  line-height: 30px;
+
line-height: 53px;
−
 
+
padding-top: 0px;
−
}
+
padding-bottom: 0px;
−
 
+
position: absolute;
−
 
+
background-color: rgba(0,0,0,1.00);
−
/*
+
opacity: 0;
−
菜单按钮部分
+
−
*/
+
−
#menu_btn{
+
−
margin-top: 18px;
+
−
  display: none;
+
−
  width:10%;
+
−
  height:0px;
+
−
  background-color: gold;
+
−
  position: fixed;
+
−
  max-width: 60px;
+
−
  max-height: 60px;
+
−
  min-width: 30px;
+
−
  min-height: 30px;
+
−
  text-align: center;
+
−
  line-height: 50px;
+
−
}
+
−
.cebian{
+
−
position: fixed;
+
−
bottom: 0;
+
−
margin-bottom: 0;
+
−
z-index: 999;
+
−
width: 100%;
+
−
height: 50%;
+
−
top:auto;
+
−
font-size: 100%;
+
−
background-color: #000;
+
−
}
+
−
.cebian > .menu_title{
+
−
position: relative;
+
−
width: 100%;
+
−
height: 20%;
+
−
top:auto;
+
−
bottom: 0px;
+
−
background-color: green;
+
−
/*border: 1px solid #c0c0c0;*/
+
−
 
+
−
}
+
−
 
+
−
.cebian > .menu_title> .menu_logo{
+
−
position: relative;
+
−
width: 50%;
+
−
height: 100%;
+
−
background-color: green;
+
−
 
+
−
float: left;
+
−
 
+
−
}
+
−
.cebian > .menu_title> .menu_button{
+
−
position: relative;
+
−
width: 50%;
+
−
height: 100%;
+
−
background-color: green;
+
−
 
+
−
float: right;
+
−
 
+
−
 
+
−
 
+
−
 
+
−
}
+
−
.cebian > .menu_box{
+
−
position: relative;
+
−
width: 100%;
+
−
height: 80%;
+
−
 
+
−
 
+
−
}
+
−
.cebian > .menu_box>.menu{
+
−
position: relative;
+
−
width: 22.5%;
+
−
height: 30%;
+
−
background-color: green;
+
−
/*border: 1px solid #c0c0c0;*/
+
−
float: left;
+
−
margin-left: 2%;  
+
  
 
}
 
}
Line 190: Line 479:
 
background-position: center center;
 
background-position: center center;
 
position: relative;
 
position: relative;
−
background-color: #fff;
+
background-image: url(https://static.igem.org/mediawiki/2019/c/c1/T--Jilin_China--Home--Banner--0.png);
 +
background-size: cover;
 +
background-repeat: no-repeat;
 
}
 
}
 +
 
#third_s {
 
#third_s {
 
height: 824px;
 
height: 824px;
 
position: relative;
 
position: relative;
 +
padding: 00;
 
background-color: rgba(255,255,255,1.00);
 
background-color: rgba(255,255,255,1.00);
 
}
 
}
Line 200: Line 493:
 
height: 810px;
 
height: 810px;
 
background-color: rgba(255,255,255,1.00);
 
background-color: rgba(255,255,255,1.00);
 +
padding: 00;
 
position: relative;
 
position: relative;
 
}
 
}
 
#third_s #third_1 #third_1_1 {
 
#third_s #third_1 #third_1_1 {
−
background-color: rgba(195,128,129,1.00);
+
background-color: rgba(253,234,201,1.00);
−
height: 810px;
+
 
position: absolute;
 
position: absolute;
 
margin: 0 0;
 
margin: 0 0;
 
width: 75%;
 
width: 75%;
−
left: 19px;
 
 
top: -37px;
 
top: -37px;
 
}
 
}
 
#zhuan {
 
#zhuan {
 
margin-top: 18px;
 
margin-top: 18px;
−
display: block;
+
display: none;
 
width: 10%;
 
width: 10%;
 
height: 60px;
 
height: 60px;
Line 225: Line 517:
 
line-height: 50px;
 
line-height: 50px;
 
bottom: 45px;
 
bottom: 45px;
−
right: 134px;
+
right: 215px;
 
}
 
}
  
Line 231: Line 523:
 
</style>
 
</style>
  
−
<div id="bg_menu" class="cebian hidden">
+
 
−
   <div class="menu_title">
+
<div id="bg_menu" class="menu_inner_block">menu
−
    <div class="menu_logo">jilinchina!</div>
+
   <div class="menu_inner_block" id="menu_0">
−
    <div class="menu_button" id="menu_button">取消按钮</div>
+
  <div class="menu_inner_block" id="menu_1">
 +
  This piece is for the wonderful moments.
 
   </div>
 
   </div>
−
   <div id="menu_box" class="menu_box">
+
   <div class="menu_inner_block" id="menu_2">
−
   <div id="lizi" class="menu">第一块</div>
+
  <div class="menu_inner_block" id="menu_2_title_0">
−
   <div class="menu">第一块</div>
+
   <div class="menu_inner_block" id="m_2_t_0_0">Jilin_China</div> 
−
  <div class="menu">第一块</div>
+
  <div class="menu_inner_block" id="m_2_t_0_1">Main menu</div> 
−
  <div class="menu">第一块</div>
+
  </div>
−
   <div class="menu">第一块</div>
+
   <div class="menu_inner_block" id="menu_2_block_0">
−
   <div class="menu">第一块</div>
+
<div class="menulink">Description</div>
−
   <div class="menu">第一块</div>
+
<div class="menulink">More are developing!</div>  
−
   <div class="menu">第一块</div>
+
<div class="menulink">More are developing!</div>
 +
  </div>
 +
   <div class="menu_inner_block" id="menu_2_title_1">Maybe you are srceahing for this!</div>
 +
   <div class="menu_inner_block" id="menu_2_block_1"></div>
 +
   <div class="menu_inner_block" id="menu_2_title_2">
 +
  <div class="menu_inner_block" id="m_2_t_2_0"></div>
 +
   <div class="menu_inner_block" id="m_2_t_2_1"><span id="menu_cha">×</span></div>
 +
 
 
    
 
    
 +
  </div>
 +
 
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
</div>
 +
 +
 +
 
<!--屏幕内容第一条 导航栏 -->
 
<!--屏幕内容第一条 导航栏 -->
 
<nav id="first_s">
 
<nav id="first_s">
Line 256: Line 562:
 
         </div>
 
         </div>
 
         <ul class="hidden-xs">
 
         <ul class="hidden-xs">
−
           <li class="active list_1"><a href="#">Home</a></li>
+
            
−
           <li class="list_1"><a href="#">第一块</a>
+
           <li class="list_1"><a href="#">Project</a>
 
             <ul>
 
             <ul>
−
               <li>内一块</li>
+
               <li class="list_2">Description
−
               <li>内一块
+
         
 +
              </li>
 +
               <li class="list_2 noable">soon
 
                 <ul>
 
                 <ul>
−
                   <li>内二块</li>
+
                   <li class="list_3 noable">soon</li>
−
                   <li>内二块</li>
+
                   <li class="list_3 noable">soon</li>
−
                   <li>内二块</li>
+
                   <li class="list_3 noable">soon</li>
 
                 </ul>
 
                 </ul>
 
                 </li>
 
                 </li>
−
                 <li>内一块</li>
+
                 <li class="list_2">soon</li>
 
               </ul>
 
               </ul>
 
             </li>
 
             </li>
−
             <li class="list_1"><a href="#">第二块</a></li>
+
             <li class="list_1"><a href="#">Welcome</a></li>
−
            <li class="list_1"><a href="#">第三块</a></li>
+
       
−
             <li class="list_1"><a href="#">第四块</a></li>
+
              
−
            <li class="list_1"><a href="#">第五块</a></li>
+
−
            <li class="list_1"><a href="#">第四块</a></li>
+
−
            <li class="list_1"><a href="#">第五块</a></li>
+
 
           </ul>
 
           </ul>
 
        
 
        
Line 288: Line 593:
 
     <div id="third_1" class="container">
 
     <div id="third_1" class="container">
 
<div id="third_1_1">
 
<div id="third_1_1">
−
backface-visibility:hidden;
+
 
 
</div>
 
</div>
 
</div>
 
</div>
  
 
     </div>
 
     </div>
−
<div id="zhuan">翻转</div>
 
−
    <div id="menu_btn">菜单</div>
 
 
</html>
 
</html>
−
<html>
 
−
<script>
 
−
function $$(id){
 
−
var el=document.getElementById(id);
 
−
return el;
 
−
}
 
−
//获取全局元素部分
 
−
var menudiv=document.getElementsByClassName("menu");
 
−
var menu_box=document.getElementById("menu_box");
 
−
var menu_btn=document.getElementById("menu_btn");
 
−
var bg_menu=document.getElementById("bg_menu");
 
−
//菜单部分函数
 
−
function menuStart(){
 
−
var menu_w=document.documentElement.clientWidth;
 
−
var menu_h=document.documentElement.clientHeight;
 
−
    document.getElementById("lizi").innerHTML="宽度："+menu_w+"，高度："+menu_h;
 
−
    for(var i=0;i<menudiv.length;i++){
 
−
        menudiv[i].style.marginTop=menu_box.offsetHeight*0.025+"px";
 
−
    }
 
−
        //菜单按钮的改变
 
−
    menu_btn.style.height=menu_btn.offsetWidth+"px";
 
−
    menu_btn.style.bottom=menu_btn.offsetWidth+"px";
 
−
    menu_btn.style.right=menu_btn.offsetWidth+"px"
 
  
  
 +
<html>
  
−
    if(menu_w>=430){
 
−
    //整个菜单的改变
 
−
    bg_menu.style.width=35+"%";
 
−
    bg_menu.style.height=bg_menu.offsetWidth*0.8+"px";
 
−
    bg_menu.style.minWidth=150+"px";
 
−
    bg_menu.style.minHeight=150+"px";
 
−
    bg_menu.style.maxWidth=430+"px";
 
−
    bg_menu.style.maxHeight=430+"px";
 
  
−
    bg_menu.style.right=menu_btn.offsetWidth*1.7+"px";
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/tool.js&action=raw&ctype=text/javascript"></script>
−
    bg_menu.style.bottom=menu_btn.offsetWidth*2.2+"px";
+
<script src="https://2019.igem.org/wiki/index.php?title=Template:Jilin_China/renderTP.js&action=raw&ctype=text/javascript"></script>
−
    bg_menu.style.left="auto";
+
−
    console.log(bg_menu.offsetHeight);
+
−
 
+
  
  
−
    }
 
−
    else{
 
−
    bg_menu.style.width=100+"%";
 
−
    bg_menu.style.height=50+"%";
 
−
    bg_menu.style.right=0;
 
−
    bg_menu.style.left=0;
 
−
    bg_menu.style.bottom=0;
 
−
 
−
 
−
    }
 
−
   
 
−
 
−
}
 
−
 
−
//窗口加载
 
−
window.onload=function(){
 
−
menu_btn.style.display="block";
 
−
    menuStart();
 
−
    document.getElementById('bg_menu').classList.add("hidden");
 
−
 
−
}
 
−
//窗口改变
 
−
window.onresize = function(){
 
−
    menuStart();
 
−
}
 
−
 
−
//自定义菜单开关
 
−
menu_btn.onclick=function(){
 
  
−
    if(hasClass(bg_menu, 'hidden')){
 
−
        removeClass(bg_menu,'hidden');         
 
−
    }
 
−
    else{       
 
−
        addClass(bg_menu,'hidden');
 
−
    }
 
−
    menuStart();
 
−
}
 
−
//特效部分
 
−
//导航鼠标hover
 
−
var nav_bg=document.getElementById("nav_bg");
 
−
var list_1=document.getElementsByClassName("list_1");//获取导航外层项目
 
−
 
−
function nav_anti(){
 
−
  for(var i=0;i<list_1.length;i++){
 
−
  list_1[i].onmouseenter=function(){
 
−
        nav_bg.style.backgroundColor="#fff";
 
−
        nav_bg.style.transition =0.5+"s";
 
−
  }
 
−
  list_1[i].onmouseleave=function(){
 
−
        nav_bg.style.backgroundColor="transparent";
 
−
  }
 
−
  }
 
−
}
 
−
nav_anti();
 
−
 
−
 
−
$$("zhuan").onclick=function(){
 
−
  $$("third_1_1").style.transition=1+"s linear";
 
−
  $$("third_1_1").style.transform="rotateY("+180+"deg)";
 
−
}
 
−
function $$(id){
 
−
var el=document.getElementById(id);
 
−
return el;
 
−
}
 
−
function $C$(Class){
 
−
var el=document.getElementsByClassName(Class);
 
−
return el;
 
−
}
 
−
 
−
//有关类名字的方法
 
−
function addClass(el, className) {
 
−
    if (hasClass(el, className)) {
 
−
    return;
 
−
    }
 
−
    let newClass = el.className.split(' ');
 
−
    newClass.push(className);
 
−
    el.className = newClass.join(' ');
 
−
}
 
−
 
−
function hasClass(el, className) {
 
−
      // \s匹配任何空白字符，包括空格、制表符、换页符等等
 
−
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
 
−
    return reg.test(el.className);
 
−
    }
 
−
function removeClass(el, className){
 
−
    if (!hasClass(el, className)) {
 
−
        return;
 
−
    }
 
−
    let newClass = el.className.split(' ');
 
−
    newClass.forEach(function(val, index, newClass){
 
−
    if(val === className){
 
−
        newClass.splice(index,1);
 
−
    }
 
−
    }) ;
 
−
    el.className = newClass.join(' ');
 
−
}
 
−
 
−
 
−
var content={
 
−
    detail : [
 
−
 
−
          {title : "ertyu",
 
−
          para  : [
 
−
 
−
 
−
          {
 
−
      word : "我是第一段",
 
−
      pic : "1.png",
 
−
      strong : ["strong","asd"],
 
−
      div : {
 
−
      id : "chart1",
 
−
      class : ["strong","asd"]
 
−
            }
 
−
      },
 
−
 
−
      {
 
−
      word : "你知道吗",
 
−
      pic : "none",
 
−
      strong : []
 
−
      }
 
−
 
−
 
−
      ]},
 
−
 
−
 
−
 
−
          {title : "ert2121221",
 
−
      para : [
 
−
 
−
 
−
      {
 
−
      word : "我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你",
 
−
      pic : "1.png",
 
−
      strong : ["strong","asd"],
 
−
      div : {
 
−
      id : "chart1",
 
−
      class : ["strong","asd"]
 
−
      }
 
−
      },
 
−
 
−
        {
 
−
      word : "你知道吗",
 
−
      pic : "none",
 
−
      strong : []
 
−
      },
 
−
 
−
      {
 
−
      word : "你知道吗",
 
−
      pic : "none",
 
−
      strong : []
 
−
      },
 
−
 
−
          ]}
 
−
 
−
          ]
 
−
}
 
−
var contElement=[];
 
−
function renderWord(){
 
−
for(var i=0;i<content.detail.length;i++){
 
−
var tT=document.createElement("h1");
 
−
tT.innerHTML=content.detail[i].title;
 
−
console.log(tT);
 
−
contElement.push(tT);
 
−
        for(var j=0;j<content.detail[i].para.length;j++){
 
−
            var tP=document.createElement("p");
 
−
            tP.innerHTML=content.detail[i].para[j].word;
 
−
            console.log(tP);
 
−
            contElement.push(tP);
 
−
            if(content.detail[i].para[j].pic!="none"){
 
−
            var tImg=document.createElement("div");
 
−
            tImg.innerHTML="<img src=\'"+content.detail[i].para[j].pic+"\'>";
 
−
                console.log(tImg);
 
−
                contElement.push(tImg);
 
−
            }
 
−
        }
 
−
}
 
−
for(var i=0;i<contElement.length;i++){
 
−
  $$("third_1_1").appendChild(contElement[i]);
 
−
}
 
−
 
−
 
−
}
 
−
renderWord();
 
−
 
−
</script>
 
 
</html>
 
</html>

Revision as of 16:35, 22 June 2019