Difference between revisions of "Team:AHUT China/home"

 
(96 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
 
+
{{:Team:AHUT_China/Template/CSS_RESET}}
−
{{AHUT_China}}
+
 
<html lang="en">
 
<html lang="en">
 
     <head>
 
     <head>
Line 18: Line 17:
 
         <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/style_css?action=raw&ctype=text/css" type="text/css" />
 
         <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/style_css?action=raw&ctype=text/css" type="text/css" />
 
         <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/responsive_css?action=raw&ctype=text/css" type="text/css" />
 
         <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/responsive_css?action=raw&ctype=text/css" type="text/css" />
−
         <link rel="stylesheet" href="https://2018.igem.org/Team:AHUT_China/zzsc_css?action=raw&ctype=text/css" >
+
         <style>
 +
/* basic styles for black background and crosshair cursor */
 +
body {
 +
background: rgba(0,0,0,1.00);
 +
margin: 0;
 +
}
 +
 
 +
canvas {
 +
cursor: crosshair;
 +
display: block;
 +
}
 +
</style>
 
     </head>
 
     </head>
 +
   
 +
 
 
      
 
      
 
         <!--================Header Area =================-->
 
         <!--================Header Area =================-->
−
        <header class="header_area">
+
            <header class="header_area">
 
             <div class="container">
 
             <div class="container">
 
                 <nav class="navbar navbar-expand-lg navbar-light">
 
                 <nav class="navbar navbar-expand-lg navbar-light">
 
                     <!-- Brand and toggle get grouped for better mobile display -->
 
                     <!-- Brand and toggle get grouped for better mobile display -->
−
                     <a class="navbar-brand logo_h" href="index.html"><img src="image/Logo.png" alt=""></a>
+
                     <a class="navbar-brand logo_h" href="https://2018.igem.org/Team:AHUT_China/home"><img src="https://static.igem.org/mediawiki/2018/b/b0/T--AHUT_China--_newlogo.jpg" height="110" width="80" alt=""></a>
 
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 
                         <span class="icon-bar"></span>
 
                         <span class="icon-bar"></span>
Line 33: Line 45:
 
                     </button>
 
                     </button>
 
                     <!-- Collect the nav links, forms, and other content for toggling -->
 
                     <!-- Collect the nav links, forms, and other content for toggling -->
−
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
+
                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
 
                         <ul class="nav navbar-nav menu_nav ml-auto">
 
                         <ul class="nav navbar-nav menu_nav ml-auto">
−
                             <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>  
+
                             <li class="nav-item active"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/home">Home</a></li>  
 
                             <li class="nav-item submenu dropdown">
 
                             <li class="nav-item submenu dropdown">
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM</a>
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TEAM</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="blog.html">Team Members</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Team
−
                                     <li class="nav-item"><a class="nav-link" href="blog-single.html">Collaborations</a></li>
+
">Team Members</a></li>
 +
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Attributions">Attribution</a>
 +
 
                                 </ul>
 
                                 </ul>
 
                             </li>  
 
                             </li>  
Line 46: Line 60:
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT</a>
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PROJECT</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="blog.html">Description</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Overview">Overview</a></li>
−
                                    <li class="nav-item"><a class="nav-link" href="blog-single.html">Design</a></li>
+
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Background">Background</a></li>
−
<li class="nav-item"><a class="nav-link" href="blog.html">Description</a></li>
+
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/protocol">Protocol</a></li>
−
                                     <li class="nav-item"><a class="nav-link" href="blog-single.html">Experiments</a></li>
+
                                     <li class="nav-item"><a class="nav-link"
−
<li class="nav-item"><a class="nav-link" href="blog.html">Notebook</a></li>
+
href="https://2018.igem.org/Team:AHUT_China/design">Design</a></li>                                                    
−
                                     <li class="nav-item"><a class="nav-link" href="blog-single.html">InterLab</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Demonstrate">Demonstrate</a></li>
−
<li class="nav-item"><a class="nav-link" href="blog-single.html">Model</a></li>
+
    <li class="nav-item"><a class="nav-link" href="
−
<li class="nav-item"><a class="nav-link" href="blog.html">Results</a></li>
+
https://2018.igem.org/Team:AHUT_China/InterLab">Interlab</a></li>
−
                                     <li class="nav-item"><a class="nav-link" href="blog-single.html">Demonstrate</a></li>
+
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Notebook">Notebook</a></li>
−
<li class="nav-item"><a class="nav-link" href="blog.html">Improve</a></li>
+
                                     <li class="nav-item"><a class="nav-link"  
−
                                    <li class="nav-item"><a class="nav-link" href="blog-single.html">Attributions</a></li>
+
href="https://2018.igem.org/Team:AHUT_China/Result">Result</a></li>
 +
                                  </li>
 
                                 </ul>
 
                                 </ul>
 
                             </li>  
 
                             </li>  
Line 62: Line 77:
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS</a>
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PARTS</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="blog.html">Parts Overview</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Improve">Improved parts</a></li>
−
                                     <li class="nav-item"><a class="nav-link" href="blog-single.html">Basic Parts</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/New_Parts">New Parts</a></li>
−
<li class="nav-item"><a class="nav-link" href="blog.html">Description</a></li>
+
−
                                    <li class="nav-item"><a class="nav-link" href="blog-single.html">Composite Parts</a></li>
+
−
<li class="nav-item"><a class="nav-link" href="blog.html">Part Collection</a></li>
+
−
                                   
+
 
                                 </ul>
 
                                 </ul>
 
                             </li>  
 
                             </li>  
−
<li class="nav-item"><a class="nav-link" href="elements.html">SAFETY</a></li>
+
<li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Model">Modeling</a></li>
 
                             <li class="nav-item submenu dropdown">
 
                             <li class="nav-item submenu dropdown">
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices</a>
 
                                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices</a>
 
                                 <ul class="dropdown-menu">
 
                                 <ul class="dropdown-menu">
−
                                     <li class="nav-item"><a class="nav-link" href="blog.html">Human Practices</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Human_Practices">Overview</a></li>
−
                                     <li class="nav-item"><a class="nav-link" href="blog-single.html">Education & Engagement</a></li>
+
                                     <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/HP_FOR_SILVER">HP for Silver</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/INTEGRATED_FOR_GOLD">Integrated HP for gold</a></li>
 +
                                    <li class="nav-item"><a class="nav-link" href="
 +
https://2018.igem.org/Team:AHUT_China/Public_Engagement">Public Engagement</a></li>
 
                                 </ul>
 
                                 </ul>
 
                             </li>  
 
                             </li>  
−
                             <li class="nav-item submenu dropdown">
+
                             <li class="nav-item"><a class="nav-link" href="https://2018.igem.org/Team:AHUT_China/Collaborations">Collaboration</a></li>
−
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices</a>
+
−
                                <ul class="dropdown-menu">
+
−
                                    <li class="nav-item"><a class="nav-link" href="blog.html">Applied Design</a></li>
+
−
                                    <li class="nav-item"><a class="nav-link" href="blog-single.html">Entrepreneurship</a></li>
+
−
<li class="nav-item"><a class="nav-link" href="blog.html">Hardware</a></li>
+
−
                                    <li class="nav-item"><a class="nav-link" href="blog-single.html">Measurement</a></li>
+
−
<li class="nav-item"><a class="nav-link" href="blog.html">Model</a></li>
+
−
                                    <li class="nav-item"><a class="nav-link" href="blog-single.html">Plant</a></li>
+
−
<li class="nav-item"><a class="nav-link" href="blog.html">Software</a></li>
+
−
                                </ul>
+
−
                            </li>
+
 
<!--                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>-->
 
<!--                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>-->
 
                         </ul>
 
                         </ul>
Line 95: Line 99:
 
                 </nav>
 
                 </nav>
 
             </div>
 
             </div>
 +
         
 
         </header>
 
         </header>
 +
       
 +
       
 
         <!--================Header Area =================-->
 
         <!--================Header Area =================-->
−
        <div id="level">
 
−
<div id="content">
 
−
<div id="gears">
 
−
<div id="gears-static"></div>
 
−
<div id="gear-system-1">
 
−
<div class="shadow" id="shadow15"></div>
 
−
<div id="gear15"></div>
 
−
<div class="shadow" id="shadow14"></div>
 
−
<div id="gear14"></div>
 
−
<div class="shadow" id="shadow13"></div>
 
−
<div id="gear13"></div>
 
−
</div>
 
−
<div id="gear-system-2">
 
−
<div class="shadow" id="shadow10"></div>
 
−
<div id="gear10"></div>
 
−
<div class="shadow" id="shadow3"></div>
 
−
<div id="gear3"></div>
 
−
</div>
 
−
<div id="gear-system-3">
 
−
<div class="shadow" id="shadow9"></div>
 
−
<div id="gear9"></div>
 
−
<div class="shadow" id="shadow7"></div>
 
−
<div id="gear7"></div>
 
−
</div>
 
−
<div id="gear-system-4">
 
−
<div class="shadow" id="shadow6"></div>
 
−
<div id="gear6"></div>
 
−
<div id="gear4"></div>
 
−
</div>
 
−
<div id="gear-system-5">
 
−
<div class="shadow" id="shadow12"></div>
 
−
<div id="gear12"></div>
 
−
<div class="shadow" id="shadow11"></div>
 
−
<div id="gear11"></div>
 
−
<div class="shadow" id="shadow8"></div>
 
−
<div id="gear8"></div>
 
−
</div>
 
−
<div class="shadow" id="shadow1"></div>
 
−
<div id="gear1"></div>
 
−
<div id="gear-system-6">
 
−
<div class="shadow" id="shadow5"></div>
 
−
<div id="gear5"></div>
 
−
<div id="gear2"></div>
 
−
</div>
 
−
<div class="shadow" id="shadowweight"></div>
 
−
<div id="chain-circle"></div>
 
−
<div id="chain"></div>
 
−
<div id="weight"></div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
        <!--================Breadcrumb Area =================-->
 
−
      <!--================Header Area =================-->
 
 
        
 
        
−
         <!--================ Recent Area  =================-->
+
         <!--================Breadcrumb Area =================-->
 +
      <!-- <section class="breadcrumb_area">
 +
            <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background=""></div>
 +
         
 +
                <canvas id="canvas"></canvas> 
 +
               
 +
            </div>
 +
        </section>-->
 +
        <!--================Breadcrumb Area =================-->
 +
     
 +
 
 +
 
 +
<div align="center"><video  width="100%"  controls="controls"><source src="https://static.igem.org/mediawiki/2018/b/bc/T--AHUT_China--_home1475852.jpg" type="video/mp4"></div>
 +
 
 +
        <img width="100%" src="https://static.igem.org/mediawiki/2018/3/3a/T--AHUT_China--_home145532.jpg"  alt=""/>
 +
 
 +
             
 +
           
 +
           
 +
         
 +
   
 +
       
 +
 
 
          
 
          
 
        
 
        
 
          
 
          
 
         <!--================ start footer Area  =================-->
 
         <!--================ start footer Area  =================-->
−
         <DIV style="background: rgba(1,1,1,1.00)"><div align="center"><video height="200px" width="800px" controls="controls"><source src="https://static.igem.org/mediawiki/2018/9/91/T--AHUT_China--_foot.mp4" type="video/mp4" ></div>
+
          
−
                  <br></div>
+
 
        
 
        
  
Line 189: Line 164:
 
       <script src="https://2018.igem.org/Team:AHUT_China/contact_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 
       <script src="https://2018.igem.org/Team:AHUT_China/contact_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 
       <script src="https://2018.igem.org/Team:AHUT_China/custom_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 
       <script src="https://2018.igem.org/Team:AHUT_China/custom_js?action=raw&ctype=text/javascript" type="text/javascript" ></script>
 +
      <script>
 +
// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
 +
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
 +
window.requestAnimFrame = ( function() {
 +
return window.requestAnimationFrame ||
 +
window.webkitRequestAnimationFrame ||
 +
window.mozRequestAnimationFrame ||
 +
function( callback ) {
 +
window.setTimeout( callback, 1000 / 60 );
 +
};
 +
})();
 +
 +
// now we will setup our basic variables for the demo
 +
var canvas = document.getElementById( 'canvas' ),
 +
ctx = canvas.getContext( '2d' ),
 +
// full screen dimensions
 +
cw = window.innerWidth,
 +
ch = window.innerHeight,
 +
// firework collection
 +
fireworks = [],
 +
// particle collection
 +
particles = [],
 +
// starting hue
 +
hue = 120,
 +
// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
 +
limiterTotal = 5,
 +
limiterTick = 0,
 +
// this will time the auto launches of fireworks, one launch per 80 loop ticks
 +
timerTotal = 80,
 +
timerTick = 0,
 +
mousedown = false,
 +
// mouse x coordinate,
 +
mx,
 +
// mouse y coordinate
 +
my;
 +
 +
// set canvas dimensions
 +
canvas.width = cw;
 +
canvas.height = ch;
 +
 +
// now we are going to setup our function placeholders for the entire demo
 +
 +
// get a random number within a range
 +
function random( min, max ) {
 +
return Math.random() * ( max - min ) + min;
 +
}
 +
 +
// calculate the distance between two points
 +
function calculateDistance( p1x, p1y, p2x, p2y ) {
 +
var xDistance = p1x - p2x,
 +
yDistance = p1y - p2y;
 +
return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
 +
}
 +
 +
// create firework
 +
function Firework( sx, sy, tx, ty ) {
 +
// actual coordinates
 +
this.x = sx;
 +
this.y = sy;
 +
// starting coordinates
 +
this.sx = sx;
 +
this.sy = sy;
 +
// target coordinates
 +
this.tx = tx;
 +
this.ty = ty;
 +
// distance from starting point to target
 +
this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
 +
this.distanceTraveled = 0;
 +
// track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
 +
this.coordinates = [];
 +
this.coordinateCount = 3;
 +
// populate initial coordinate collection with the current coordinates
 +
while( this.coordinateCount-- ) {
 +
this.coordinates.push( [ this.x, this.y ] );
 +
}
 +
this.angle = Math.atan2( ty - sy, tx - sx );
 +
this.speed = 2;
 +
this.acceleration = 1.05;
 +
this.brightness = random( 50, 70 );
 +
// circle target indicator radius
 +
this.targetRadius = 1;
 +
}
 +
 +
// update firework
 +
Firework.prototype.update = function( index ) {
 +
// remove last item in coordinates array
 +
this.coordinates.pop();
 +
// add current coordinates to the start of the array
 +
this.coordinates.unshift( [ this.x, this.y ] );
 +
 +
// cycle the circle target indicator radius
 +
if( this.targetRadius < 8 ) {
 +
this.targetRadius += 0.3;
 +
} else {
 +
this.targetRadius = 1;
 +
}
 +
 +
// speed up the firework
 +
this.speed *= this.acceleration;
 +
 +
// get the current velocities based on angle and speed
 +
var vx = Math.cos( this.angle ) * this.speed,
 +
vy = Math.sin( this.angle ) * this.speed;
 +
// how far will the firework have traveled with velocities applied?
 +
this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
 +
 +
// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
 +
if( this.distanceTraveled >= this.distanceToTarget ) {
 +
createParticles( this.tx, this.ty );
 +
// remove the firework, use the index passed into the update function to determine which to remove
 +
fireworks.splice( index, 1 );
 +
} else {
 +
// target not reached, keep traveling
 +
this.x += vx;
 +
this.y += vy;
 +
}
 +
}
 +
 +
// draw firework
 +
Firework.prototype.draw = function() {
 +
ctx.beginPath();
 +
// move to the last tracked coordinate in the set, then draw a line to the current x and y
 +
ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
 +
ctx.lineTo( this.x, this.y );
 +
ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
 +
ctx.stroke();
 +
 +
ctx.beginPath();
 +
// draw the target for this firework with a pulsing circle
 +
ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
 +
ctx.stroke();
 +
}
 +
 +
// create particle
 +
function Particle( x, y ) {
 +
this.x = x;
 +
this.y = y;
 +
// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
 +
this.coordinates = [];
 +
this.coordinateCount = 5;
 +
while( this.coordinateCount-- ) {
 +
this.coordinates.push( [ this.x, this.y ] );
 +
}
 +
// set a random angle in all possible directions, in radians
 +
this.angle = random( 0, Math.PI * 2 );
 +
this.speed = random( 1, 10 );
 +
// friction will slow the particle down
 +
this.friction = 0.95;
 +
// gravity will be applied and pull the particle down
 +
this.gravity = 1;
 +
// set the hue to a random number +-20 of the overall hue variable
 +
this.hue = random( hue - 20, hue + 20 );
 +
this.brightness = random( 50, 80 );
 +
this.alpha = 1;
 +
// set how fast the particle fades out
 +
this.decay = random( 0.015, 0.03 );
 +
}
 +
 +
// update particle
 +
Particle.prototype.update = function( index ) {
 +
// remove last item in coordinates array
 +
this.coordinates.pop();
 +
// add current coordinates to the start of the array
 +
this.coordinates.unshift( [ this.x, this.y ] );
 +
// slow down the particle
 +
this.speed *= this.friction;
 +
// apply velocity
 +
this.x += Math.cos( this.angle ) * this.speed;
 +
this.y += Math.sin( this.angle ) * this.speed + this.gravity;
 +
// fade out the particle
 +
this.alpha -= this.decay;
 +
 +
// remove the particle once the alpha is low enough, based on the passed in index
 +
if( this.alpha <= this.decay ) {
 +
particles.splice( index, 1 );
 +
}
 +
}
 +
 +
 +
 +
// draw particle
 +
Particle.prototype.draw = function() {
 +
 
 +
  ctx. beginPath();
 +
// move to the last tracked coordinates in the set, then draw a line to the current x and y
 +
ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
 +
ctx.lineTo( this.x, this.y );
 +
ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
 +
ctx.stroke();
 +
 
 +
 
 +
}
 +
 +
// create particle group/explosion
 +
function createParticles( x, y ) {
 +
// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
 +
var particleCount = 30;
 +
while( particleCount-- ) {
 +
particles.push( new Particle( x, y ) );
 +
}
 +
}
 +
 +
// main demo loop
 +
function loop() {
 +
// this function will run endlessly with requestAnimationFrame
 +
requestAnimFrame( loop );
 +
 +
// increase the hue to get different colored fireworks over time
 +
hue += 0.5;
 +
 +
// normally, clearRect() would be used to clear the canvas
 +
// we want to create a trailing effect though
 +
// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
 +
ctx.globalCompositeOperation = 'destination-out';
 +
// decrease the alpha property to create more prominent trails
 +
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 +
ctx.fillRect( 0, 0, cw, ch );
 +
// change the composite operation back to our main mode
 +
// lighter creates bright highlight points as the fireworks and particles overlap each other
 +
ctx.globalCompositeOperation = 'lighter';
 +
 +
    var text = "Welcom to our pages"; 
 +
  ctx.font = "50px sans-serif";
 +
  var textData = ctx.measureText(text);
 +
  ctx.fillStyle = "rgba("+parseInt(random(0,255))+","+parseInt(random(0,255))+","+parseInt(random(0,255))+",0.3)";
 +
  ctx.fillText(text,cw /2-textData.width/2,ch/2);
 +
 
 +
// loop over each firework, draw it, update it
 +
var i = fireworks.length;
 +
while( i-- ) {
 +
fireworks[ i ].draw();
 +
fireworks[ i ].update( i );
 +
}
 +
 +
// loop over each particle, draw it, update it
 +
var i = particles.length;
 +
while( i-- ) {
 +
particles[ i ].draw();
 +
particles[ i ].update( i );
 +
}
 +
 +
// launch fireworks automatically to random coordinates, when the mouse isn't down
 +
if( timerTick >= timerTotal ) {
 +
if( !mousedown ) {
 +
// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
 +
     
 +
      for(var h=0;h<50;h++)
 +
      {
 +
          fireworks.push( new Firework( cw / 2, ch/2, random( 0, cw ), random( 0, ch  ) ) );
 +
      }
 +
     
 +
     
 +
timerTick = 0;
 +
}
 +
} else {
 +
timerTick++;
 +
}
 +
 +
// limit the rate at which fireworks get launched when mouse is down
 +
if( limiterTick >= limiterTotal ) {
 +
if( mousedown ) {
 +
// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
 +
fireworks.push( new Firework( cw / 2, ch/2, mx, my ) );
 +
limiterTick = 0;
 +
}
 +
} else {
 +
limiterTick++;
 +
}
 +
}
 +
 +
// mouse event bindings
 +
// update the mouse coordinates on mousemove
 +
canvas.addEventListener( 'mousemove', function( e ) {
 +
mx = e.pageX - canvas.offsetLeft;
 +
my = e.pageY - canvas.offsetTop;
 +
});
 +
 +
// toggle mousedown state and prevent canvas from being selected
 +
canvas.addEventListener( 'mousedown', function( e ) {
 +
e.preventDefault();
 +
mousedown = true;
 +
});
 +
 +
canvas.addEventListener( 'mouseup', function( e ) {
 +
e.preventDefault();
 +
mousedown = false;
 +
});
 +
 +
// once the window loads, we are ready for some fireworks!
 +
window.onload = loop;
 +
 +
</script>
 +
<script language="javascript"> 
 +
                        $(document).ready(function(){
 +
                            video.play(); 
 +
                        });
 +
                         
 +
                        var vList = ['001.mp4', 'video//1.mp4', 'video//02.mp4']; // 初始化播放列表 
 +
                        var vLen = vList.length; 
 +
                        var curr = 0; 
 +
                        var video = document.getElementById("myvideo"); 
 +
                        video.addEventListener('ended', function(){
 +
                            play();
 +
                        }); 
 +
                           
 +
                        function play() { 
 +
                            video.src = vList[curr]; 
 +
                            video.load();   
 +
                            video.play(); 
 +
                            curr++; 
 +
                            if(curr >= vLen){ 
 +
                                curr = 0; //重新循环播放
 +
                            } 
 +
                           
 +
                        } 
 +
</script> 
 
</html>
 
</html>
 +
{{:Team:AHUT_China/footer}}
 +
{{:Team:AHUT_China/footercss}}

Latest revision as of 09:17, 17 October 2018

Royal Hotel Royal Hotel