Biomod/2012/HKBU/BU Magician: Difference between revisions
Runmin Wang (talk | contribs) |
Runmin Wang (talk | contribs) |
||
| Line 314: | Line 314: | ||
<div style="padding: 10px; color: #272727; background-color:#FfFfFf; width: 800px; align = center; FONT-FAMILY: Helvetica; FONT-SIZE: 14px">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. | <div style="padding: 10px; color: #272727; background-color:#FfFfFf; width: 800px; align = center; FONT-FAMILY: Helvetica; FONT-SIZE: 14px">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: <br/> | Project Highlights: <br/> | ||
-Feasibility and low cost. | -Feasibility and low cost. <br/> | ||
-Real in vitro experiment being conducted | -Real in vitro experiment being conducted <br/> | ||
-Promising future application | -Promising future application <br/> | ||
In this website, we will show you our ideas, design and results. Explore to find out more… | In this website, we will show you our ideas, design and results. Explore to find out more… | ||
Revision as of 21:43, 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; }
- menu2 { background:#45A8DF; }
- menu2 ul li a { color:#FFF; }
- menu2 ul li a span.over { background: #A6DD00; color:#333; }
- menu2 ul li.nav1 a span.over { background: #fea274; }
- menu2 ul li.nav2 a span.over { background: #b0bbba; }
- menu2 ul li.nav3 a span.over { background: #a3f091; }
- menu2 ul li.nav4 a span.over { background: #86dbf9; }
- menu2 ul li.nav5 a span.over { background: #e0caf0; }
- menu2 ul li.nav6 a span.over { background: #9dace9; }
- 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}
- column-content {width: 0px; float: left; margin: 0 0 0 0;padding: 0;}
.firstHeading {display:none; width:0px;}
- column-one {display:none; width:0px;background-color: #ffffff;}
- 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;}
- content{ margin: 0 0 0 0; align: center; padding: 12px 12px 12px 12px; width:
800px;background-color: #ffffff; border: 0;}
- bodyContent{ width: 800px; align: center; background-color: #fffffff;}
- 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>
<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/59/Hkbutest2.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
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
</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>
.attr('width','800').attr('height','300')){kind=link}
.attr('width','800').attr('height','300')){kind=link}
.attr('width','800').attr('height','300')){kind=link}
.attr('width','800').attr('height','300')){kind=link}
.attr('width','800').attr('height','300')){kind=link}
