Team:UESTC Life

From 2013.igem.org

(Difference between revisions)
Line 67: Line 67:
font-size: 12px;
font-size: 12px;
font-weight: bold;
font-weight: bold;
-
z-index:999;
+
z-index:9999;
width: 300px;
width: 300px;
height: 120px;
height: 120px;
Line 463: Line 463:
</div>
</div>
<div>
<div>
 +
<div id="popDiv" class="mydiv" style="display:none;">
 +
<div id="pp_gallery" class="pp_gallery">
 +
<div id="pp_preview" class="pp_preview">
 +
  <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg">
 +
    </div>
 +
    <div id="pp_loading" class="pp_loading"></div>
 +
    <div id="pp_next" class="pp_next"></div>
 +
    <div id="pp_prev" class="pp_prev"></div>
 +
    <div id="pp_thumbContainer">
 +
 +
        <div class="album">
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="images/album1/1.jpg" />
 +
                <span  style="display:block; bottom:30px;">The Sixties by Tetsumo</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="images/album1/2.jpg" />
 +
                <span>The Sixties by Tetsumo</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="images/album1/3.jpg" />
 +
                <span>The Sixties by Tetsumo</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="images/album1/4.jpg" />
 +
                <span>The Sixties by Tetsumo</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="images/album1/5.jpg" />
 +
                <span>The Sixties by Tetsumo</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="images/album1/6.jpg" />
 +
                <span>The Sixties by Tetsumo</span>
 +
            </div>
 +
            <div class="descr">
 +
                Doctor
 +
            </div>
 +
        </div>
 +
 +
        <div class="album">
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="" />
 +
                <span>Butterfly Girl</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="" />
 +
                <span>Mmmmmmh Strawberries</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="" />
 +
                <span>Polaroid in Picture</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="" />
 +
                <span>Girl with brown hair</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="" />
 +
                <span>Hair up</span>
 +
            </div>
 +
            <div class="content">
 +
                <img src="https://static.igem.org/mediawiki/2013/c/c3/Uestclife1_%287%29.jpg" alt="" />
 +
                <span>Smiling Girl</span>
 +
            </div>
 +
            <div class="descr">
 +
                Portraits
 +
            </div>
 +
        </div>
 +
 +
        <div id="pp_back" class="pp_back">Back</div>
 +
    </div>
</div>
</div>
<div>
<div>
-
<img src="https://static.igem.org/mediawiki/2013/2/29/Uestclifebiot_sample1.jpg" alt="" />
+
    <span class="reference">
-
<h1>Annotation Overlay Effect</h1>
+
        <a href="javascript:closeDiv()">X</a>
-
<p>Today we will create a simple overlay effect to display annotations in e.g. portfolio
+
    </span>
-
items of a web designers portfolio. We got the idea from the wonderful
+
-
portfolio of www.rareview.com where Flash is used to create the
+
-
effect. We will use jQuery.</p>
+
-
<a href="http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/" target="_blank" class="article">Article</a>
+
-
<a href="http://tympanus.net/Tutorials/AnnotationOverlayEffect/" target="_blank" class="demo">Demo</a>
+
</div>
</div>
 +
</div>
 +
<div id="bg" class="bg" style="display:none;"></div>
 +
<a href="javascript:showDiv()"><font size=14px>点击这里弹出层</font></a>
 +
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
 +
</div>
 +
</div>
</div>
</div>
</div>

Revision as of 16:23, 16 September 2013

Loading pages...