Difference between revisions of "Team:NKU China/test"

 
(36 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{NUK_China/wiki}}
+
{{NKU_China/menubar}}
 
<html>
 
<html>
 
<head>
 
<head>
     <!--delete in wiki-->
+
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <!--separatrix-->
 
     <style>
 
     <style>
         main#notebook {
+
         .main#attributions {
             margin: 0px;
+
             padding: 0 10vw;
             text-align: center;
+
             padding-bottom: 10vh;
             box-sizing: border-box;
+
             font-size: 1.15rem;
            padding: 0px;
+
 
         }
 
         }
  
         .ui-effects-transfer {
+
         .main div.h2 {
             border: 2px dotted gray;
+
            color: cyan;
 +
            text-align: left;
 +
            font-size: 2rem;
 +
             padding-bottom: 1rem;
 
         }
 
         }
  
         #buttons {
+
         article {
             padding: 10px;
+
             margin-bottom: 2.5rem;
 
         }
 
         }
    </style>
 
    <script src="https://2016.igem.org/Template:NKU_China/js/jquery?action=raw&ctype=text/javascript"></script>
 
    <script src="https://2016.igem.org/Template:NKU_China/js/jquery-ui?action=raw&ctype=text/javascript"></script>
 
    <script id="ready-js">
 
        $( function() {
 
            // run the currently selected effect
 
            function runEffect(effect) {
 
                // Most effect types need no options passed by default
 
                var options = {};
 
                // some effects have required parameters
 
                if ( effect === "scale" ) {
 
                    options = { percent: 50 };
 
                } else if ( effect === "transfer" ) {
 
                    options = { to: 'button[value="transfer"]', className: "ui-effects-transfer" };
 
                } else if ( effect === "size" ) {
 
                    options = { to: { width: 200, height: 60 } };
 
                }
 
  
                // Run the effect
+
        #nutshell {
                $( "#effect" ).effect( effect, options, 500, callback );
+
            padding: 1rem 0;
            };
+
        }
  
            // Callback function to bring a hidden box back
+
        #nutshell .article {
             function callback() {
+
             margin: 1rem 0.4rem;
                setTimeout(function() {
+
            line-height: 1.6rem;
                    $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
+
        }
                }, 1000 );
+
            };
+
  
            // Set effect from select menu value
+
        #nutshell .article div:first-child {
            $("#buttons button").each(function (index, value) {
+
            font-weight: bold;
                $(value).on("click", function () {
+
            color: cyan;
                    runEffect($(this).attr('value'));
+
            text-indent: 0;
                    return false;
+
         }
                });
+
            })
+
         } )
+
    </script>
+
  
 +
        #details .p {
 +
            line-height: 1.2;
 +
        }
 +
    </style>
 +
    <script>
 +
        $(function () {
 +
            //particles();
 +
        })
 +
    </script>
 
</head>
 
</head>
 +
<body id="dongzhuoer">
 +
    <div id="particles-js"></div>
 +
    <script>
 +
        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"
 +
      }
 +
  }
  
<body>
+
);
     <main id="notebook">
+
     </script>
        <div id="buttons">
+
    <div class="main" id="attributions">
            <button value="blind">Blind</button>
+
        <div class="p">
            <button value="bounce">Bounce</button>
+
             haha
             <button value="clip">Clip</button>
+
            <button value="drop">Drop</button>
+
            <button value="explode">Explode</button>
+
            <button value="fade">Fade</button>
+
            <button value="fold">Fold</button>
+
            <button value="highlight">Highlight</button>
+
            <button value="puff">Puff</button>
+
            <button value="pulsate">Pulsate</button>
+
            <button value="scale">Scale</button>
+
            <button value="shake">Shake</button>
+
            <button value="size">Size</button>
+
            <button value="slide">Slide</button>
+
            <button value="transfer">Transfer</button>
+
 
         </div>
 
         </div>
        <img id="effect" src="image/whole-group-1280.jpg">
+
    </div>
    </main>
+
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{NKU_China/footer}}

Latest revision as of 08:07, 7 October 2016

haha