Difference between revisions of "Biomod/2012/HKBU/BU Magician"

From OpenWetWare
Jump to: navigation, search
(3 intermediate revisions by the same user not shown)
Line 257: Line 257:
 
                         });
 
                         });
 
                     }
 
                     }
                 ).attr('src','http://openwetware.org/images/5/59/Hkbutest2.jpg').attr('width','800').attr('height','300')
+
                 ).attr('src','http://openwetware.org/images/5/5b/HKBU2012Methods.jpg').attr('width','800').attr('height','300')
 
                 );
 
                 );
 
                 }
 
                 }
Line 324: Line 324:
 
<html>
 
<html>
 
<h1><font face="trebuchet ms" size = "5.5px" style="color:#272727">Video</font></h1>
 
<h1><font face="trebuchet ms" size = "5.5px" style="color:#272727">Video</font></h1>
<center><iframe width="800" height="500" src="http://www.youtube.com/watch?v=w1CN91PpOZ0&feature=youtube_gdata" frameborder="0" allowfullscreen></iframe></center>
+
<center><iframe width="800" height="500" src="http://www.youtube.com/embed/w1CN91PpOZ0" frameborder="0" allowfullscreen></iframe></center>
 
</html>
 
</html>
  

Revision as of 18:54, 27 October 2012

<html> <img src="http://openwetware.org/images/b/b8/HKBUlogo104.jpg" height="200" width="900"/> </html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jOuery</title> <link rel="stylesheet" href="style.css" /> <style> .menu { height: 45px; display: block; } .menu ul { list-style: none; padding: 0; margin: 0; } .menu ul li { float: left; overflow: hidden; position: relative; text-align: center; line-height: 45px; } .menu ul li a { position: relative; display: block; width: 128px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .menu ul li a span { position: absolute; left: 0; width: 128px; } .menu ul li a span.out { top: 0px; } .menu ul li a span.over, .menu ul li a span.bg { top: -45px; }


  1. menu2 { background:#45A8DF; }
  2. menu2 ul li a { color:#FFF; }
  3. menu2 ul li a span.over { background: #A6DD00; color:#333; }
  4. menu2 ul li.nav1 a span.over { background: #fea274; }
  5. menu2 ul li.nav2 a span.over { background: #b0bbba; }
  6. menu2 ul li.nav3 a span.over { background: #a3f091; }
  7. menu2 ul li.nav4 a span.over { background: #86dbf9; }
  8. menu2 ul li.nav5 a span.over { background: #e0caf0; }
  9. menu2 ul li.nav6 a span.over { background: #9dace9; }
  10. menu2 ul li.nav7 a span.over { background: #FFE66F; }

</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script language="javascript"> $(document).ready(function() {


$("#menu2 li a").wrapInner( '' );

$("#menu2 li a").each(function() { $('' + $(this).text() + '' ).appendTo( this ); });

$("#menu2 li a").hover(function() { $(".out",this).stop().animate({'top':'45px'},200); $(".over",this).stop().animate({'top':'0px'},200);

}, function() { $(".out",this).stop().animate({'top':'0px'},200); $(".over",this).stop().animate({'top':'-45px'},200); });

});

</script> </head> <body>

</body> </html> <html> <head> <style> .container{background-color: #ffffff; margin-top:0px}

  1. column-content {width: 0px; float: left; margin: 0 0 0 0;padding: 0;}

.firstHeading {display:none; width:0px;}

  1. column-one {display:none; width:0px;background-color: #ffffff;}
  1. globalWrapper{width: 930px; background-color: #ffffff; margin-left: auto;margin-right: auto;

-moz-box-shadow: 0px 0px 15px #ccc; -webkit-box-shadow: 0px 0px 15px #ccc; box-shadow: 0px 0px 15px #ccc;}

  1. content{ margin: 0 0 0 0; align: center; padding: 12px 12px 12px 12px; width:

800px;background-color: #ffffff; border: 0;}

  1. bodyContent{ width: 800px; align: center; background-color: #fffffff;}
  2. column-content{width: 800px;background-color: #ffffff;}

.rotator{

   background-color:#222;
   width:800px;
   height:300px;
   margin:0px auto;
   position:relative;
   font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
   color:#fff;
   text-transform:uppercase;
   letter-spacing:-1px;
   border:3px solid #f0f0f0;
   overflow:hidden;
   -moz-box-shadow:0px 0px 10px #222;
   -webkit-box-shadow:0px 0px 10px #222;
   box-shadow:0px 0px 10px #222;

} img.bg{

   position:absolute;
   top:0px;
   left:0px;

} .rotator ul{

   list-style:none;
   position:absolute;
   right:0px;
   top:0px;
   margin-top:6px;
   z-index:999999;

} .rotator ul li{

   display:block;
   float:left;
   clear:both;
   width:260px;

} .rotator ul li a{

   width:230px;
   float:right;
   clear:both;
   padding-left:10px;
   text-decoration:none;
   display:block;
   height:52px;
   line-height:52px;
   background-color:#222;
   margin:1px -20px 1px 0px;
   opacity:0.7;
   color:#f0f0f0;
   font-size:20px;
   border:2px solid #000;
   border-right:none;
   outline:none;
   text-shadow:-1px 1px 1px #000;
   -moz-border-radius:10px 0px 0px 20px;
   -webkit-border-top-left-radius:10px;
   -webkit-border-bottom-left-radius:20px;
   border-top-left-radius:10px;
   border-bottom-left-radius:20px;

} .rotator ul li a:hover{

     text-shadow:0px 0px 2px #fff;

} .rotator .heading{

   position:absolute;
   top:0px;
   left:0px;
   width:500px;

} .rotator .heading h1{

   text-shadow:-1px 1px 1px #555;
   font-weight:normal;
   font-size:46px;
   padding:20px;
   color:orange;

} .rotator .description{

   width:500px;
   height:80px;
   position:absolute;
   bottom:0px;
   left:0px;
   padding:20px;
   background-color:#222;
   -moz-border-radius:0px 10px 0px 0px;
   -webkit-border-top-right-radius:10px;
   border-top-right-radius:10px;
   opacity:0.7;
   border-top:2px solid #000;
   border-right:2px solid #000;

} .rotator .description p{

   text-shadow:-1px 1px 1px #000;
   text-transform:none;
   letter-spacing:normal;
   line-height:26px;

} a.more{

   color:orange;
   text-decoration:none;
   text-transform:uppercase;
   font-size:10px;

} a.more:hover{

   color:#fff;

} </style> </head> <body>

<a class="back" href=""></a>
<img src="" width="800" height="300" class="bg" alt=""/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> <script type="text/javascript">

           $(function() {
               var current = 1;
               
               var iterate		= function(){
                   var i = parseInt(current+1);
                   var lis = $('#rotmenu').children('li').size();
                   if(i>lis) i = 1;
                   display($('#rotmenu li:nth-child('+i+')'));
               }
               display($('#rotmenu li:first'));
               var slidetime = setInterval(iterate,6000);
               $('#rotmenu li').bind('click',function(e){
                   clearTimeout(slidetime);
                   display($(this));
                   e.preventDefault();
               });
               function display(elem){
                   var $this 	= elem;
                   var repeat 	= false;
                   if(current == parseInt($this.index() + 1))
                       repeat = true;
                   if(!repeat)
                       $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
                           $(this).animate({'opacity':'0.7'},700);
                       });
                   current = parseInt($this.index() + 1);
                   var elem = $('a',$this);
                   
                       elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
                   var info_elem = elem.next();
                   $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                       $('h1',$(this)).html(info_elem.find('.info_heading').html());
                       $(this).animate({'left':'0px'},400,'easeInOutQuad');
                   });
                   
                   $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
                       $('p',$(this)).html(info_elem.find('.info_description').html());
                       $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
                   });  
                   if(parseInt(info_elem.find('.info_image').html())==1){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/d/d6/Hkbutest1.jpg').attr('width','800').attr('height','300')
               );
                   }
              else if(parseInt(info_elem.find('.info_image').html())==2){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/5/5b/HKBU2012Methods.jpg').attr('width','800').attr('height','300')
               );
               }
              else if(parseInt(info_elem.find('.info_image').html())==3){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/c/c8/Hkbutest3.jpg').attr('width','800').attr('height','300')
               );
               }
              else if(parseInt(info_elem.find('.info_image').html())==4){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/9/92/HKBUHomepagegraph1.jpg').attr('width','800').attr('height','300')
               );
               }
              else if(parseInt(info_elem.find('.info_image').html())==5){
                  $('#rot1').prepend(
                   $('<img/>',{
                       style	:	'opacity:0',
                       className : 'bg'
                   }).load(
                   function(){
                       $(this).animate({'opacity':'1'},600);
                       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
                           $(this).remove();
                       });
                   }
               ).attr('src','http://openwetware.org/images/f/fc/HKBUGROUP2.jpg').attr('width','800').attr('height','300')
               );
               }       
               }
           });
       </script>

</body> </html>

Welcome to BU Magician Homepage

Welcome to HKBU Magicians webpage 2012! This year, we conduct in vitro experiments to develop a simple yet effective method for self-assembling magnetic nanoparticle-based gene delivery.

Project Highlights:
-Feasibility and low cost.
-Real in vitro experiment being conducted
-Promising future application

In this website, we will show you our ideas, design and results. Explore to find out more…


<html>

Video

<iframe width="800" height="500" src="http://www.youtube.com/embed/w1CN91PpOZ0" frameborder="0" allowfullscreen></iframe>

</html>


<html> <img src="http://openwetware.org/images/a/a4/HKBU2012allfaculty.jpg" height="200" width="800"/> <a href="http://openwetware.org/index.php?title=Biomod/2012/HKBU/BU_Magician&action=edit">have a try</a> </html>