Difference between revisions of "Team:BIT/Interlab/test5"

(Replaced content with "aaa")
Line 1: Line 1:
−
aaa
+
<!DOCTYPE html>
 +
<html lang="zh">
 +
<head>
 +
<meta charset="UTF-8">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
<title>带详情页的js动画轮播图特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:BIT/test-pz/css" />
 +
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
 +
<style type="text/css">
 +
#sideMenu, #top_title {
 +
display: none;
 +
}
 +
#content {
 +
width: 100%;
 +
margin: 0px;
 +
padding: 0px;
 +
background: #ecf0f9;
 +
}
 +
</style>
 +
 
 +
</head>
 +
<body class="loading">
 +
<svg class="hidden">
 +
<symbol id="icon-arrow" viewBox="0 0 24 24">
 +
<title>arrow</title>
 +
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
 +
</symbol>
 +
<symbol id="icon-drop" viewBox="0 0 24 24">
 +
<title>drop</title>
 +
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
 +
</symbol>
 +
<svg id="icon-github" viewBox="0 0 33 33">
 +
<title>github</title>
 +
<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
 +
</svg>
 +
<symbol id="icon-caret" viewBox="0 0 24 13">
 +
<title>caret</title>
 +
<path d="M23.646.328a.842.842 0 0 0-1.19 0l-10.459 10.48L1.517.328a.842.842 0 0 0-1.189 1.19L11.382 12.57c.164.164.369.246.595.246.205 0 .43-.082.594-.246L23.625 1.518a.824.824 0 0 0 .02-1.19z"/>
 +
</symbol>
 +
</svg>
 +
<main>
 +
<div class="content content--fixed">
 +
<header class="codrops-header">
 +
<div class="codrops-links">
 +
<a class="codrops-icon codrops-icon--prev" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201807315254.html" title="返回下载页"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
 +
<a class="codrops-icon codrops-icon--drop" href="http://www.htmleaf.com/" title="jQuery之家"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
 +
</div>
 +
<h1 class="codrops-header__title">Motion Reveal Slideshow</h1>
 +
</header>
 +
<p class="info">Inspired by <a href="https://www.instagram.com/p/Bjr-3Gbj_ZE/?taken-by=louis_ansa" target="_blank">"Paradis - Reprise"</a> by Louis Ansa</p>
 +
<a class="github" href="https://github.com/codrops/MotionRevealSlideshow/" title="Find this project on GitHub" target="_blank"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
 +
</div>
 +
<div class="slideshow">
 +
<div class="slide">
 +
<div class="preview">
 +
<div class="preview__img-wrap">
 +
<div class="preview__img" style="background-image: url(img/project1.jpg);"></div>
 +
<div class="preview__img-reveal"></div>
 +
</div>
 +
<h3 class="preview__title">Carmino Burano</h3>
 +
<div class="preview__content">
 +
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
 +
</div>
 +
</div>
 +
<div class="slide__img-wrap">
 +
<div class="slide__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="slide__img-reveal"></div>
 +
</div>
 +
<span class="slide__number">#01</span>
 +
<h3 class="slide__title">Carmino</h3>
 +
</div>
 +
<div class="slide">
 +
<div class="preview">
 +
<div class="preview__img-wrap">
 +
<div class="preview__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="preview__img-reveal"></div>
 +
</div>
 +
<h3 class="preview__title">Jackardi Jack</h3>
 +
<div class="preview__content">
 +
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
 +
</div>
 +
</div>
 +
<div class="slide__img-wrap">
 +
<div class="slide__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="slide__img-reveal"></div>
 +
</div>
 +
<span class="slide__number">#02</span>
 +
<h3 class="slide__title">Jackardi</h3>
 +
</div>
 +
<div class="slide">
 +
<div class="preview">
 +
<div class="preview__img-wrap">
 +
<div class="preview__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="preview__img-reveal"></div>
 +
</div>
 +
<h3 class="preview__title">Hostabili Hell</h3>
 +
<div class="preview__content">
 +
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
 +
</div>
 +
</div>
 +
<div class="slide__img-wrap">
 +
<div class="slide__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="slide__img-reveal"></div>
 +
</div>
 +
<span class="slide__number">#03</span>
 +
<h3 class="slide__title">Hostabili</h3>
 +
</div>
 +
<div class="slide">
 +
<div class="preview">
 +
<div class="preview__img-wrap">
 +
<div class="preview__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="preview__img-reveal"></div>
 +
</div>
 +
<h3 class="preview__title">Tellawa Tell</h3>
 +
<div class="preview__content">
 +
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
 +
</div>
 +
</div>
 +
<div class="slide__img-wrap">
 +
<div class="slide__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="slide__img-reveal"></div>
 +
</div>
 +
<span class="slide__number">#04</span>
 +
<h3 class="slide__title">Tellawa</h3>
 +
</div>
 +
<div class="slide">
 +
<div class="preview">
 +
<div class="preview__img-wrap">
 +
<div class="preview__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="preview__img-reveal"></div>
 +
</div>
 +
<h3 class="preview__title">Lochnox Lox</h3>
 +
<div class="preview__content">
 +
<p>You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.</p>
 +
</div>
 +
</div>
 +
<div class="slide__img-wrap">
 +
<div class="slide__img" style="background-image: url(https://2018.igem.org/File:T--BIT--Figure_pz_wiki_test1.jpeg);"></div>
 +
<div class="slide__img-reveal"></div>
 +
</div>
 +
<span class="slide__number">#05</span>
 +
<h3 class="slide__title">Lochnox</h3>
 +
</div>
 +
<nav class="slidenav">
 +
<button class="slidenav__item slidenav__item--prev">Previous</button>
 +
<button class="slidenav__item slidenav__item--next">Next</button>
 +
<button class="slidenav__preview">
 +
<svg class="icon icon--caret">
 +
<use xlink:href="#icon-caret"></use>
 +
</svg>
 +
</button>
 +
</nav>
 +
</div>
 +
</main>
 +
<script src="https://2018.igem.org/Template:BIT/test-pz/js2"></script>
 +
<script src="https://2018.igem.org/Template:BIT/test-pz/js3"></script>
 +
<script src="https://2018.igem.org/Template:BIT/test-pz/js1"></script>
 +
</body>
 +
</html>

Revision as of 12:48, 8 September 2018

<!DOCTYPE html> 带详情页的js动画轮播图特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库

Motion Reveal Slideshow

Inspired by "Paradis - Reprise" by Louis Ansa

Carmino Burano

You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.

#01

Carmino

Jackardi Jack

You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.

#02

Jackardi

Hostabili Hell

You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.

#03

Hostabili

Tellawa Tell

You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.

#04

Tellawa

Lochnox Lox

You’re not your job. You’re not how much money you have in the bank. You’re not the car you drive. You’re not the contents of your wallet. You’re not your f***ing khakis. You’re the all-singing, all-dancing crap of the world. What do you want? Wanna go back to the s*** job, f***in’ condo world, watching sitcoms? F*** you, I won’t do it. Fifth rule: one fight at a time, fellas.

#05

Lochnox