Difference between revisions of "Team:NKU China/Javascript/main"

 
Line 1: Line 1:
−
$(document).ready(function(){
 
−
 
 
  
 +
 +
 +
// LiftEffect({
 +
// "control1": ".lift2",   //侧栏电梯的容器
 +
// "control2": "#ccc",                          //需要遍历的电梯的父元素
 +
// "target": [".dianti1",".dianti2",".dianti3"], //监听的内容，注意一定要从小到大输入
 +
// "current": "xuanzhong"   //选中的样式
 +
// });
 +
 +
function LiftEffect(json){
 +
 +
var array=[];
 +
 +
for(var i =0; i<json.target.length;i++){
 +
var t = $(json.target[i]).offset().top;
 +
array.push(t);
 +
 +
}
 +
 +
function Selected(index){
 +
$(json.control2).children().eq(index).addClass(json.current).siblings().removeClass(json.current);
 +
}
 +
 +
 +
$(window).on("scroll",Check);
 +
 +
function Check(){
 +
 +
var wst = $(window).scrollTop();
 +
 +
 +
if(wst >= $(json.target[0]).offset().top-100){
 +
$(json.control1).fadeIn(500);
 +
}else{
 +
$(json.control1).fadeOut(500);
 +
}
 +
 +
var key =0;
 +
var flag = true;
 +
for(var i =0; i<array.length; i++){
 +
key++;
 +
if(flag){
 +
 +
if(wst >= array[array.length-key]-300){
 +
var index = array.length-key;
 +
flag = false;
 +
}else{
 +
flag=true;
 +
}
 +
 +
}
 +
}
 +
Selected(index);
 +
}
 +
 +
$(json.control2).children().on("click",function(){
 +
 +
$(window).off("scroll");
 +
var index = $(this).index();
 +
Selected(index);
 +
 +
 +
var flag = true;
 +
for(var i =0; i<array.length; i++){
 +
 +
if(flag){
 +
 +
if(index == i){
 +
$("html,body").stop().animate({
 +
"scrollTop": array[i]-50
 +
},500,function(){
 +
$(window).on("scroll",Check);
 +
});
 +
flag = false;
 +
}else{
 +
flag=true;
 +
}
 +
 +
}
 +
}
 +
 
});
 
});
−
particlesJS('particles-js',
 
−
  {
 
−
      "particles": {
 
−
          "number": {
 
−
              "value": 100,
 
−
              "density": {
 
−
                  "enable": true,
 
−
                  "value_area": 800
 
−
              }
 
−
          },
 
−
          "color": {
 
−
              "value": "#0ff"
 
−
          },
 
−
          "shape": {
 
−
              "type": "circle",
 
−
              "stroke": {
 
−
                  "width": 0,
 
−
                  "color": "#000000"
 
−
              },
 
−
              "polygon": {
 
−
                  "nb_sides": 5
 
−
              },
 
−
              "image": {
 
−
                  "src": "img/github.svg",
 
−
                  "width": 100,
 
−
                  "height": 100
 
−
              }
 
−
          },
 
−
          "opacity": {
 
−
              "value": 0.4,
 
−
              "random": false,
 
−
              "anim": {
 
−
                  "enable": false,
 
−
                  "speed": 1,
 
−
                  "opacity_min": 0,
 
−
                  "sync": false
 
−
              }
 
−
          },
 
−
          "size": {
 
−
              "value": 5,
 
−
              "random": true,
 
−
              "anim": {
 
−
                  "enable": false,
 
−
                  "speed": 40,
 
−
                  "size_min": 0,
 
−
                  "sync": false
 
−
              }
 
−
          },
 
−
          "line_linked": {
 
−
              "enable": true,
 
−
              "distance": 150,
 
−
              "color": "#ff0",
 
−
              "opacity": 0.4,
 
−
              "width": 1
 
−
          },
 
−
          "move": {
 
−
              "enable": true,
 
−
              "speed": 6,
 
−
              "direction": "none",
 
−
              "random": false,
 
−
              "straight": false,
 
−
              "out_mode": "out",
 
−
              "attract": {
 
−
                  "enable": true,
 
−
                  "rotateX": 600,
 
−
                  "rotateY": 1200
 
−
              }
 
−
          }
 
−
      },
 
−
      "interactivity": {
 
−
          "detect_on": "canvas",
 
−
          "events": {
 
−
              "onhover": {
 
−
                  "enable": true,
 
−
                  "mode": ["grab", "bubble"]
 
−
              },
 
−
              "onclick": {
 
−
                  "enable": true,
 
−
                  "mode": ["push", "repulse"]
 
−
              },
 
−
              "resize": true
 
−
          },
 
−
          "modes": {
 
−
              "grab": {
 
−
                  "distance": 100,
 
−
                  "line_linked": {
 
−
                      "opacity": 0.75
 
−
                  }
 
−
              },
 
−
              "bubble": {
 
−
                  "distance": 100,
 
−
                  "size": 4,
 
−
                  "duration": 2,
 
−
                  "opacity": 8,
 
−
                  "speed": 5
 
−
              },
 
−
              "repulse": {
 
−
                  "distance": 200
 
−
              },
 
−
              "push": {
 
−
                  "particles_nb": 4
 
−
              },
 
−
              "remove": {
 
−
                  "particles_nb": 2
 
−
              }
 
−
          }
 
−
      },
 
−
      "retina_detect": true,
 
−
      "config_demo": {
 
−
          "hide_card": false,
 
−
          "background_color": "#b61924",
 
−
          "background_image": "",
 
−
          "background_position": "50% 50%",
 
−
          "background_repeat": "no-repeat",
 
−
          "background_size": "cover"
 
−
      }
 
−
  }
 
  
−
);
+
 
 +
 
 +
}

Latest revision as of 17:19, 23 October 2017


// LiftEffect({ // "control1": ".lift2", //侧栏电梯的容器 // "control2": "#ccc", //需要遍历的电梯的父元素 // "target": [".dianti1",".dianti2",".dianti3"], //监听的内容，注意一定要从小到大输入 // "current": "xuanzhong" //选中的样式 // });

function LiftEffect(json){

var array=[];

for(var i =0; i<json.target.length;i++){ var t = $(json.target[i]).offset().top; array.push(t);

}

function Selected(index){ $(json.control2).children().eq(index).addClass(json.current).siblings().removeClass(json.current); }


$(window).on("scroll",Check);

function Check(){

var wst = $(window).scrollTop();


if(wst >= $(json.target[0]).offset().top-100){ $(json.control1).fadeIn(500); }else{ $(json.control1).fadeOut(500); }

var key =0; var flag = true; for(var i =0; i<array.length; i++){ key++; if(flag){

if(wst >= array[array.length-key]-300){ var index = array.length-key; flag = false; }else{ flag=true; }

} } Selected(index); }

$(json.control2).children().on("click",function(){

$(window).off("scroll"); var index = $(this).index(); Selected(index);


var flag = true; for(var i =0; i<array.length; i++){

if(flag){

if(index == i){ $("html,body").stop().animate({ "scrollTop": array[i]-50 },500,function(){ $(window).on("scroll",Check); }); flag = false; }else{ flag=true; }

} }

});


}