Difference between revisions of "Template:CSU CHINA/PageBase"

(Created page with "<html> <script> class BorderAnimation{ constructor(srcArray,align,defaultIndex,offsetX,offsetY){ this.element = document.createElement('div'); this.element.classLis...")
 
 
Line 10: Line 10:
 
     this.offsetX = offsetX;
 
     this.offsetX = offsetX;
 
     this.offsetY = offsetY;
 
     this.offsetY = offsetY;
 +
    this.prevY = $(this.element).css('top');
 +
 +
    this.cursor = -1;
 +
    this.defaultIndex = defaultIndex;
 +
    for(var src of srcArray){
 +
      this.addImage(src);
 +
    }
 +
 +
    for(let i=0;i<align.length;i++){
 +
      let item = document.getElementById(align[i]);
 +
      this.align.push(item);
 +
      $(item).mouseenter(() => {
 +
        this.switchImage(i);
 +
        $(this.element).css('top', -40 + this.prevY + this.offsetY + 'px');
 +
      });
 +
      $(item).mouseleave(() => {
 +
        if(this.defaultIndex >= 0)
 +
          this.switchImage(this.defaultIndex);
 +
        $(this.element).css('top', this.prevY + this.offsetY + 'px');
 +
      });
 +
    }
 +
    for(var item of this.align){
 +
      if(item){
 +
        this.prevY = $(item).offset().top;
 +
        break;
 +
      }
 +
    }
 +
    this.align[this.defaultIndex].addEventListener('load',() => {
 +
      this.prevY = $(this.align[this.defaultIndex]).offset().top;
 +
      this.switchImage(this.defaultIndex);
 +
      $(this.element).css('top',this.prevY + this.offsetY + 'px');
 +
    });
 +
   
 +
    if(this.align[this.defaultIndex].complete){
 +
      this.prevY = $(this.align[this.defaultIndex]).offset().top;
 +
      this.switchImage(this.defaultIndex);
 +
      $(this.element).css('top',this.prevY + this.offsetY + 'px');
 +
    }
 +
  }
 +
  addImage(src){
 +
    let img = document.createElement('img');
 +
    img.setAttribute('src',src);
 +
    img.classList.add('border');
 +
    this.list.push(img);
 +
    this.element.appendChild(img);
 +
  }
 +
  switchImage(i){
 +
    if(this.cursor == i)
 +
      return;
 +
    if(this.cursor >= 0)
 +
      if(this.cursor < this.list.length)
 +
        $(this.list[this.cursor]).css('opacity','0');
 +
    if(i >= 0)
 +
      if(i < this.list.length)
 +
        $(this.list[(this.cursor = i)]).css('opacity','1.0');
 +
    if(this.align.length > this.cursor)
 +
      if(this.align[this.cursor]){
 +
        $(this.element).css('left', $(this.align[this.cursor]).offset().left + this.offsetX + 'px');
 +
      }
 +
  }
 +
  getCount(){
 +
    return this.list.length;
 +
  }
 +
  getCursor(){
 +
    return this.cursor;
 +
  }
 +
  getElement(){
 +
    return this.element;
 +
  }
 +
}
 +
$(document).ready(function(){
 +
  $('.fold-trigger').text('▲' + $('.fold-trigger').text());
 +
  $('.fold-trigger').click(function(){
 +
    $(this).next('.folded').slideToggle();
 +
    $(this).text((($(this).text().charAt(0) == '▲') ? '▼':'▲') + $(this).text().substr(1));
 +
  });
 +
});
 +
$(document).ready(function(){
 +
  $('.fold-trigger1').text('▲' + $('.fold-trigger1').text());
 +
  $('.fold-trigger1').click(function(){
 +
    $(this).next('.folded').slideToggle();
 +
    $(this).text((($(this).text().charAt(0) == '▲') ? '▼':'▲') + $(this).text().substr(1));
 +
  });
 +
});
 +
$(document).ready(function(){
 +
  $('.fold-trigger2').text('▲' + $('.fold-trigger2').text());
 +
  $('.fold-trigger2').click(function(){
 +
    $(this).next('.folded').slideToggle();
 +
    $(this).text((($(this).text().charAt(0) == '▲') ? '▼':'▲') + $(this).text().substr(1));
 +
  });
 +
});
 +
$(document).ready(function(){
 +
  $('.fold-trigger3').text('▲' + $('.fold-trigger3').text());
 +
  $('.fold-trigger3').click(function(){
 +
    $(this).next('.folded').slideToggle();
 +
    $(this).text((($(this).text().charAt(0) == '▲') ? '▼':'▲') + $(this).text().substr(1));
 +
  });
 +
});
 +
</script>
 +
 +
 +
<style>
 +
/*Patch Start*/
 +
#HQ_page td{
 +
  padding:0;
 +
}
 +
 +
#HQ_page ul{
 +
  list-style:disc;
 +
}
 +
 +
#HQ_page li > ul{
 +
  list-style:square;
 +
}
 +
 +
#HQ_page h1, h2, h3, h4, h5{
 +
  font-family: _ExtraLight;
 +
  overflow:visible;
 +
}
 +
 +
#HQ_page header p{
 +
  color:white;
 +
  font-size:25pt;
 +
  font-family:_ExtraLight;
 +
}
 +
 +
#HQ_page header h1,
 +
#HQ_page header h2,
 +
#HQ_page header h3,
 +
#HQ_page header h4,
 +
#HQ_page header h5,
 +
#HQ_page header h6{
 +
  color:white;
 +
}
 +
 +
#HQ_page td{
 +
  border:none;
 +
  vertical-align:inherit;
 +
}
 +
 +
#HQ_page table{
 +
  border:none;
 +
  background-color:transparent;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
}
 +
 +
/*Patch End*/
 +
 +
#HQ_page a{
 +
  text-decoration:none;
 +
}
 +
#HQ_page a:hover{
 +
  text-decoration:underline;
 +
}
 +
 +
#HQ_page .gray-block{
 +
  background-color:#f4f4f4;
 +
  padding: 42px 0;
 +
  margin-bottom:50px;
 +
}
 +
 +
#HQ_page .gray-block li{
 +
  line-height: 1.5em;
 +
}
 +
 +
#HQ_page .gray-block li p,
 +
#HQ_page .main-text p{
 +
  line-height: 1.8em;
 +
  font-size: 14pt;
 +
  font-family: _ExtraLight;
 +
}
 +
 +
#HQ_page .flower-title p,
 +
#HQ_page .flower-title{
 +
  line-height: 3em;
 +
  font-size: 32pt;
 +
  font-family: _FlowerOne;
 +
}
 +
 +
#HQ_page .sup-title p,
 +
#HQ_page .sup-title{
 +
  line-height: 1.8em;
 +
  font-size: 24pt;
 +
  font-family: _Bold;
 +
}
 +
#HQ_page .sub-title p,
 +
#HQ_page .sub-title{
 +
  line-height: 1.8em;
 +
  font-size: 18pt;
 +
  font-family: _ExtraLight;
 +
}
 +
 +
 +
#HQ_page .software-text p,
 +
#HQ_page .software-text{
 +
  font-size: 14px;
 +
}
 +
 +
#HQ_page .bold-text p,
 +
#HQ_page .bold-text{
 +
  line-height: 1.8em;
 +
  font-size: 14pt;
 +
  font-family: _Bold;
 +
}
 +
 +
#HQ_page .notation p,
 +
#HQ_page .notation{
 +
  line-height: 1.6em;
 +
  font-size: 12pt;
 +
  font-family: _ExtraLight;
 +
}
 +
 +
#HQ_page .fig-notation p,
 +
#HQ_page .fig-notation{
 +
  line-height: 1.6em;
 +
  font-size: 12pt;
 +
  font-family: _Avant;
 +
}
 +
 +
 +
#HQ_page .HomeTitle p,
 +
#HQ_page .HomeTitle{
 +
  line-height: 1.6em;
 +
  font-size: 60pt;
 +
  font-family: _BoldGothic;
 +
}
 +
 +
 +
#HQ_page #solitude{
 +
  line-height: 1.6em;
 +
  font-size: 14pt;
 +
  font-family: _ExtraLight;
 +
  color:#3a4e57;
 +
}
 +
 +
#HQ_page #solitudeX{
 +
  line-height: 1.6em;
 +
  font-size: 24px;
 +
  font-family: _ExtraLight;
 +
  color:#3a4e57;
 +
}
 +
 
 +
 +
#HQ_page .dark-blue a,
 +
#HQ_page .dark-blue{
 +
  color:#0a4978;
 +
}
 +
 +
#HQ_page .hot-pink a,
 +
#HQ_page .hot-pink{
 +
  color:#ff3654;
 +
}
 +
 +
#HQ_page .software-blue a,
 +
#HQ_page .sotware-blue{
 +
  color:#3a4e57;
 +
}
 +
 +
#HQ_page .light-green a,
 +
#HQ_page .light-green{
 +
  color:#747f27;
 +
}
 +
 +
#HQ_page .dark-orange a,
 +
#HQ_page .dark-orange{
 +
  color:#db8000;
 +
}
 +
 +
#HQ_page .light-orange a,
 +
#HQ_page .light-orange{
 +
  color:#ffd84f;
 +
}
 +
 +
#HQ_page .dark-red a,
 +
#HQ_page .dark-red{
 +
  color:#cc2335;
 +
}
 +
 +
#HQ_page .dark-green a,
 +
#HQ_page .dark-green{
 +
  color:#78af2a;
 +
}
 +
 +
#HQ_page .silver-green a,
 +
#HQ_page .silver-green{
 +
  color:#6ba287;
 +
}
 +
 +
#HQ_page .game-orange a,
 +
#HQ_page .game-orange{
 +
  color:#ee7a41;
 +
}
 +
 +
#HQ_page .HCC-green a,
 +
#HQ_page .HCC-green{
 +
  color:#a4b912;
 +
}
 +
 +
 +
#HQ_page .dark-grey a,
 +
#HQ_page .dark-grey{
 +
  color:#2e2e2e;
 +
}
 +
 +
 +
#HQ_page h1.dash-title{
 +
  width:50%;
 +
  line-height:1.2em;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  padding:0;
 +
  padding-top:110px;
 +
  padding-bottom:20px;
 +
  text-align:center;
 +
  font-size: 36pt;
 +
}
 +
 +
#HQ_page .highlight-title{
 +
  text-align:left;
 +
  line-height:1.3em;
 +
  font-size:18pt;
 +
  font-family: _Bold;
 +
}
 +
 +
#HQ_page .block{
 +
  font-size:24pt;
 +
  font-weight:bold;
 +
  padding-top:60px;
 +
}
 +
 +
#HQ_page .main-text{
 +
  padding-top:0px;
 +
  padding-bottom:0px;
 +
  padding-left:12%;
 +
  padding-right:12%;
 +
}
 +
 +
#HQ_page .text-left{
 +
  width:50%;
 +
  float:left;
 +
}
 +
 +
#HQ_page .text-right{
 +
  width:50%;
 +
  float:right;
 +
}
 +
 +
#HQ_page .main-text hr{
 +
  text-align:center;
 +
  color:transparent;
 +
  background-color:transparent;
 +
  width: 24%;
 +
  border:none;
 +
  height: 2px;
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  border-top: 2px dashed #2e2e2e;
 +
}
 +
 +
#HQ_page .main-text h2,
 +
#HQ_page .main-text h3,
 +
#HQ_page .main-text h4{
 +
  text-align:center;
 +
  line-height:1.2em;
 +
}
 +
 +
 +
 +
#HQ_page .main-text center{
 +
  padding: 60px 0px;
 +
}
 +
 +
#HQ_page .gray-block ul{
 +
  font-size:16pt;
 +
}
 +
 +
 +
/*Border Animation Plugin Start */
 +
#HQ_page div.border-animation{
 +
  position: absolute;
 +
  width: 237px;
 +
  height: 237px;
 +
  overflow: hidden;
 +
  left: 0px;
 +
  top: 0px;
 +
  transition-duration: 0.5s;
 +
  transition-property: left,top;
 +
}
 +
 +
#HQ_page div.border-animation > img.border{
 +
  opacity: 0;
 +
  position: absolute;
 +
  left: 0;
 +
  top: 0;
 +
  transition-duration: 0.5s;
 +
  transition-property: opacity;
 +
}
 +
 +
#HQ_page img.align{
 +
  position: relative;
 +
  transition: 0.5s;
 +
  transition-duration: 0.5s;
 +
  transition-property: top;
 +
  top:0;
 +
  z-index: 2;
 +
}
 +
 +
#HQ_page img.align:hover{
 +
  top: -40px;
 +
}
 +
/*Border Animation Plugin End */
 +
 +
#HQ_page .fold-trigger{
 +
  cursor:pointer;
 +
}
 +
#HQ_page .fold-trigger1{
 +
  cursor:pointer;
 +
}
 +
#HQ_page .fold-trigger2{
 +
  cursor:pointer;
 +
}
 +
#HQ_page .fold-trigger3{
 +
  cursor:pointer;
 +
}
 +
 +
#HQ_page .folded{
 +
  display: none;
 +
}
 +
 +
#HQ_page footer  table{
 +
  font-size:12pt;
 +
}
 +
 +
#HQ_page footer {
 +
    background-color: #eeeeee;
 +
    padding: 100px 10%;
 +
}
 +
 +
 +
</style>
 +
</html>

Latest revision as of 00:42, 18 October 2018