Biomod/2014/Tianjin: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 319: Line 319:
position:relative;
position:relative;
         float:left;
         float:left;
         width:490px;
         width:480px;
         height:347px;
         height:347px;
z-index:17;
z-index:17;

Revision as of 20:08, 25 October 2014

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">


body { 

    display:block;
    background-color: #ffffff;
   
    }

.ys01 { 

     text-align: left;
     }

/* --the header css-- */

  1. apDiv1 {

position:relative; 

       float:left;

left:0px; top:0px; 

       margin-right:0px;

width:1000px; height:360px; z-index:1; 

       box-shadow: 0px 5px 8px rgba(0,0,0,0.4);

overflow: visible; text-align: left; background-image: url(http://openwetware.org/images/3/37/Header_tianjin.png); 

       }


/* -- navigator css -- */

  1. navDiv li { margin: 0; padding: 0;}
  2. navDiv ul {margin: 0; padding: 0; list-style: none; z-index:99;}
  3. navDiv a {text-decoration: none;margin: 0; padding: 0;}
  4. navDiv

{ 

       /* -- background body of navigator css -- */

position: relative; 

       float: left;

height: 40px; width:1000px; left: 0px; background-color: #ffffff; background-repeat: repeat-x; box-shadow: 0px 5px 8px rgba(0,0,0,0.4); margin-bottom:40px; 

       z-index:60;
       font-family: Georgia, "Times New Roman", Times, serif;
       text-align: left;

}

  1. navDiv > ul > li {
   float: left;
   margin-left: 30px;
   position: relative;

}

/* -- when mouse not on the navigator css -- */

  1. navDiv > ul > li > a {
   color: #333333;
   font-family: Verdana, 'Lucida Grande';
   font-size: 15px;
   line-height: 40px;
   padding: 11px 20px;

-webkit-transition: color .15s; 

  -moz-transition: color .15s;
    -o-transition: color .15s;
       transition: color .15s;

}

/* -- when mouse on the navigator css -- */

  1. navDiv > ul > li > a:hover {color: #ffffff; background-color: #000000;}

/* -- top and bottom of the sub meun css -- */

  1. navDiv > ul > li > ul

{ 

   opacity: 0;
   visibility: hidden;
   padding: 16px 0 20px 0;
   background-color: rgb(250,250,250);
   text-align: left;
   position: absolute;
   top: 30px;
   left: 50%;
   margin-left: -90px;
   width: 180px;

-webkit-transition: all 0.3s 0.1s; 

  -moz-transition: all 0.3s 0.1s;
    -o-transition: all 0.3s 0.1s;
       transition: all 0.3s 0.1s;

-webkit-border-radius: 5px; 

  -moz-border-radius: 5px;
       border-radius: 5px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); 

  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
       box-shadow: 0px 1px 3px rgba(0,0,0,0.4);

}

  1. navDiv > ul > li:hover > ul

{ 

   opacity: 1;
   top: 40px;
   visibility: visible;

}

  1. navDiv > ul > li > ul:before

{ 

   content: '';
   display: block;
   border-color: transparent transparent rgb(250,250,250) transparent;
   border-style: solid;
   border-width: 10px;
   position: absolute;
   top: -20px;
   left: 50%;
   margin-left: -10px;

}

  1. navDiv > ul ul > li { position: relative;}

/* -- when mouse not on the submeun css -- */

  1. navDiv ul ul a

{ 

   color: rgb(50,50,50);
   font-family: Verdana, 'Lucida Grande';
   font-size: 13px;
   background-color: rgb(250,250,250);
   padding: 5px 8px 7px 16px;
   display: block;

-webkit-transition: background-color .1s; 

  -moz-transition: background-color .1s;
    -o-transition: background-color .1s;
       transition: background-color .1s;

}

  1. navDiv ul ul ul

{ 

   visibility: hidden;
   opacity: 0;
   position: absolute;
   top: -16px;
   left: 206px;
   padding: 16px 0 20px 0;
   background-color: rgb(250,250,250);
   text-align: left;
   width: 160px;

-webkit-transition: all .3s; 

  -moz-transition: all .3s;
    -o-transition: all .3s;
       transition: all .3s;

-webkit-border-radius: 5px; 

  -moz-border-radius: 5px;
       border-radius: 5px;

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 

  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
       box-shadow: 0px 1px 3px rgba(0,0,0,.4);

}

  1. navDiv ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}

/* -- when mouse on the navigator css -- */

  1. navDiv ul ul a:hover

{ 

   background-color: #777777;
   color: rgb(240,240,240);

}


/* Back to top css */ .back-to { 

   position: fixed;
   bottom: 35px;
   *bottom: 50px;
   _bottom: 35px;
   right: 10px;
   z-index: 999;
   width: 50px;
   zoom: 1;
   }
  • html .back-to {
   /* 不能用 _position 这种写法，因为它在IE7+也会执行expression。。。 */
   position: expression(function(ele){ele.runtimeStyle.position='absolute';Expressions.style.position.fixed(ele);}(this))
   }

.back-to { 

   float: right;
   display: block;
   width: 50px;
   height: 50px;
   background: url(http://a.xnimg.cn/imgpro/button/back-home.png) no-repeat 0 0;
   outline: 0 none;
   text-indent: -9999em;

   }

.back-to:hover { 

   background-position: -50px 0
   }

.back-to .back-top { 

   float: right;
   display: block;
   width: 50px;
   height: 50px;
   background: url(http://a.xnimg.cn/imgpro/button/back-top.png) no-repeat 0 0;
   margin-left: 10px;
   outline: 0 none;
   text-indent: -9999em;
   }

.back-to .backtotop { 

   float: left;
   display: block;
   width: 50px;
   height: 50px;
   background: #666 url(http://a.xnimg.cn/imgpro/arrow/btt.png) 8px -57px no-repeat;
   margin-bottom: 15px;
   outline: 0 none;
   text-indent: -9999em;
   -moz-border-radius: 4px;
   -khtml-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
   position: relative;
  -moz-box-shadow:  0px 0px 15px #ccc;
  -webkit-box-shadow:  0px 0px 15px #ccc;
  box-shadow:  0px 0px 15px #ccc;
   }

.back-to .backtotop:hover { 

   background-color: #333;
   background-position: 8px 13px;
   }

.back-to .backtotop .back-tip { 

   position: absolute;
   visibility: hidden;
   top: -31px;
   left: -10px;
   }

.back-to .backtotop:hover .back-tip { 

   visibility: visible;
   }

.back-to .back-top:hover { 

   background-position: -50px 0;
   }


/* --video css -- */

  1. apDiv3 {

position:relative; 

       float:left;

width:490px; height:538px; z-index:5; text-align: center; 

       }
  1. apDiv3 table {

text-align: center; 

             }
  1. apDiv4 {

position:absolute; left:20px; top:24px; width:500px; height:310px; z-index:9; 

        }


/* -- bottle-shape on-off css -- */

  1. apDiv6 {

position:absolute; left:13px; top:294px; width:550px; height:63px; z-index:15; 

        }

.ys01 #apDiv6 table { text-align: left; 

                    }


/* -- Abstract css -- */

  1. apDiv7 {

position:relative; float:left; 

        display:block;
        left:0px;

width:450px; height:900px; z-index:3; 

        box-shadow: 0px 5px 8px rgba(0,0,0,0.4);

text-align: left; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; color: #000; background-color: #ffffff; 

        padding: 10px
        }

.ys02 { 

     font-size: 36px;
     color: #99cccc;
     }

/* -- Photo roll css -- */

  1. apDiv8 {

position:relative; 

        float:left;
        width:480px;
        height:347px;

z-index:17; 

        margin-left:50px;
        }

}

</style>



</head>



<body class="ys01";>

<!--header--> <div id="apDiv1"></div>


<!--navigator starts here--> 

<div id="navDiv">

<ul> 

  	    <li class='active '><a href="http://openwetware.org/wiki/Biomod/2014/Tianjin"><span>Home</span></a></li>
  	    <li class='has-sub'><a href="http://openwetware.org/wiki/Biomod/2014/wiki-2%27.html"><span>Idea</span></a>
  	        <ul>
  	            <li><a href='http://openwetware.org/wiki/Biomod/2014/wiki-2%27.html#background'><span>Background</span></a></li>
                   <li><a href='http://openwetware.org/wiki/Biomod/2014/wiki-2%27.html#motivation'><span>Motivation</span></a></li>
                   <li><a href='http://openwetware.org/wiki/Biomod/2014/wiki-2%27.html#calculation'><span>Calculation</span></a></li>
 	        </ul>   
           </li>
  	    
           <li class='has-sub'><a href="http://openwetware.org/wiki/Biomod/2014/experiment.html"><span>Project</span></a>
  	        <ul>
  	            <li><a href="http://openwetware.org/wiki/Biomod/2014/experiment.html#Three-arm locker"><span>Three-arm Locker</span></a></li>
                   <li><a href="http://openwetware.org/wiki/Biomod/2014/experiment.html#Gold nanoparticle based photosensor"><span> Gold Nanoparticle Based Photosensor</span></a></li>
                   <li><a href="http://openwetware.org/wiki/Biomod/2014/experiment.html#dna origami"><span>DNA Origami</span></a></li>
               </ul> 			
           </li>   	
  	    
           <li class='active'><a href="http://openwetware.org/wiki/Tianjin_protocol"><span>Protocol</span></a>

</li> 

           <li class='active'><a href="http://openwetware.org/wiki/Biomod/2014/future.html"><span>Future Work</span></a>

</li> 

           <li class='active '><a href="http://openwetware.org/wiki/Biomod/2014/members.html"><span>Members and Acknowledgement</span></a>
           </li>

</ul> </div>


<div id="toolBackTo" class="back-to" style="left: 1175px; "> <a stats="site_footer_back_to_top" class="backtotop" href="#top" onclick="if(Sizzle('#sidebar2 .ready-to-fix')[0]) Sizzle('#sidebar2 .ready-to-fix')[0].style.position = 'static';window.scrollTo(0,0);if(Sizzle('#sidebar2 .ready-to-fix')[0]) Sizzle('#sidebar2 .ready-to-fix')[0].style.position = '';return false;">Back to top <img stats="site_footer_back_to_top" src="http://openwetware.org/images/a/a7/TJU2012-Back-tip.png" class="back-tip"> </a> </div>




<!--Abstract starts here-->

<div id="apDiv7"> <p><span class="ys02">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Abstract</span></br> </br> &nbsp; </html> The emergence of DNA nanotechnology has led to the design and bottom-up construction of a wide range of artificial nanostructures with spatially diverse addressable shapes, two- and three-dimensional (2D and 3D) geometries, and functions as well as nanodevices and nanomachines. With a high level of structural programmability and obvious biocompatibility, accurately controlled and self-assembled DNA origami is emerging as strong candidate for delivery of small biomolecules in living systems.

Hence, this year, we design a GNP(gold nano-particle)-DNA origami complex, which possess both photothermal properties associated with GNPs and programming properties intrinsic to DNA. The complex responds to optical stimulation, since we modified GNPs on particular margin-staple strand, just like the zipper on the clothes. Once given the range intensities of optical stimulation, we prospect that the generated heat by GNPs can break the hydrogen bonds of surrounding double-strand DNA, separating the staple strand, and open the occlusive DNA origami case. To avoid the reclosing of origami, we develop a special strand-displacement reaction towards the link between GNPs and DNA origami.

Our device is photo-triggerable, which embrace remote controllability, low systemic toxicity and few side effects. We select to motivate the photothermal induction of GNPs by near-infrared irradiation (NIR irradiation), because NIR irradiation can penetrate deeper in tissues and cause less photodamage in comparison to visible light and UV-vis irradiation.

Finally, by introducing gold nanoparticles into DNA origami, we demonstrate the device as an efficient light-controllable switch, making this a promising candidate platform for unique potential applications intended for anticancer therapy, nanorobot and protein synthesis in vitro.

<html> <p></br></p> </div>




<!--Photo roll starts here-->

<div id="apDiv8"> <script> var widths=450; var heights=300; var counts=6; img1=new Image ();img1.src='http://openwetware.org/images/2/2f/QQ%E6%88%AA%E5%9B%BE20141026083449.png'; img2=new Image ();img2.src='http://openwetware.org/images/8/83/QQ%E6%88%AA%E5%9B%BE20141026100923.png'; img3=new Image ();img3.src='http://openwetware.org/images/6/61/%E6%9C%AA%E6%A0%87%E9%A2%98-1.gif'; img4=new Image ();img4.src='http://openwetware.org/images/e/e7/AFM.jpg'; img5=new Image ();img5.src="http://openwetware.org/images/2/28/SsDNA-Au.gif"; img6=new Image ();img6.src="http://openwetware.org/images/0/05/%E8%83%B6%E5%9B%BE%E8%A7%A3%E9%93%BE.png"; url1=new Image ();url1.src=''; url2=new Image ();url2.src=''; url3=new Image ();url3.src=''; url4=new Image ();url4.src=''; url5=new Image ();url5.src=''; url6=new Image ();url6.src='';

var nn=1; var key=0; function change_img() {if(key==0){key=1;} else if(document.all) {document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);} eval('document.getElementById("pic").src=img'+nn+'.src'); eval('document.getElementById("url").href=url'+nn+'.src'); for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';} document.getElementById("xxjdjj"+nn).className='bxx'; nn++;if(nn>counts){nn=1;} tt=setTimeout('change_img()',4000);} function changeimg(n){nn=n;window.clearInterval(tt);change_img();} document.write('<style>'); document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}'); document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}'); document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}'); document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}'); document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}'); document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}'); document.write('</style>'); document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">'); document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>'); document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">'); for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');} document.write('</div></div>'); change_img(); </script> </div>

</body>


<!--video starts from here-->

<div id="apDiv3">

<!--bottle-shape on-off picture --> <div id="apDiv6"><a href="#"><img src="http://openwetware.org/images/4/44/Tianjin_index14.png" width="50" height="50"></a></div>

<div id="apDiv4"; class="video" > <embed src="//www.youtube.com/embed/uR2D05GZhjs?feature=player_detailpage" width="446" height="250"

allowfullscreen="true" allownetworking="all" allowscriptaccess="always"></embed>

</div>

<!--the displayer case of the video --> <img src="http://openwetware.org/images/2/21/Vedio_background.png" width="510" height="463"><br> </br>

</div>



<!--Don't know what the function is here-->

<body > <script language="JavaScript"> <!-- //To add more stars simply add more colours in below array!! colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')

//Alter nothing below!! amount=colours.length; YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0; if (ns){ for (i=0; i < amount; i++) document.write('<LAYER NAME="nsstars'+i+'" BGCOLOR='+colours[i]+' CLIP="0,0,2,2"></LAYER>'); } else{ document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">'); for (i=0; i < amount; i++) document.write('<span id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:'+colours[i]+';font-

size:2px"></span>'); document.write('</div></div>'); } if (ns){ window.captureEvents(Event.MOUSEMOVE); function nMouse(evnt){ my=evnt.pageY;mx=evnt.pageX } window.onMouseMove=nMouse; } else{ function iMouse(){ my=event.y;mx=event.x; } document.onmousemove=iMouse } function stars(){ if (!ns)ie.style.top=document.body.scrollTop; for (i=0; i < amount; i++) 

{
var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style; 
layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10); 
layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
}

currStep+=step; }

function delay(){ Ydelay = YgetDelay+=(my-YgetDelay)*1/20; Xdelay = XgetDelay+=(mx-XgetDelay)*1/20; stars(); setTimeout('delay()',10); } delay(); //--> 

     </script>

</body>

</html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2014/Tianjin&oldid=836869"