Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
<head>
<head>
-
<title>cxSlide带缩略图和描述焦点图</title>
+
<meta charset="UTF-8">
-
<style>
+
<title>HTML5图片库</title>
-
*{margin:0;padding:0;list-style:none;}
+
<style>html, body, div, span, applet, object, iframe,
-
img{border:0;}
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-
/*焦点图 透明过度*/
+
a, abbr, acronym, address, big, cite, code,
-
.slide_fade{overflow:hidden;position:relative;margin:20px auto;width:960px;height:370px;background:#bbb;}
+
del, dfn, em, img, ins, kbd, q, s, samp,
-
.slide_fade .box{overflow:hidden;position:relative;width:960px;height:270px;background:#000;z-index:4;}
+
small, strike, strong, sub, sup, tt, var,
-
.slide_fade .box a{color:#fff;}
+
b, u, i, center,
-
.slide_fade .box a:hover{text-decoration:none;}
+
dl, dt, dd, ol, ul, li,
-
.slide_fade .list{overflow:hidden;height:9999px;}
+
fieldset, form, label, legend,
-
.slide_fade .list li{position:relative;width:960px;height:270px;}
+
table, caption, tbody, tfoot, thead, tr, th, td,
-
.slide_fade .list img{_vertical-align:top;}
+
article, aside, canvas, details, embed,
-
.slide_fade .txt{cursor:pointer;position:absolute;top:20px;left:45px;font:14px/24px "\5fae\8f6f\96c5\9ed1";}
+
figure, figcaption, footer, header, hgroup,
-
.slide_fade .txt h3{font:40px/80px "\5fae\8f6f\96c5\9ed1";}
+
menu, nav, output, ruby, section, summary,
-
.slide_fade .btn{position:absolute;bottom:0;left:0;height:97px;background:#fff;z-index:5;}
+
time, mark, audio, video {
-
.slide_fade .btn a{color:#555;text-decoration:none;}
+
  margin: 0;
-
.slide_fade .btn li{overflow:hidden;float:left;width:150px;height:90px;margin:0 0 0 12px;padding-top:7px;color:#333;
+
  padding: 0;
-
_margin:0 10px 0 0;_height:87px;}
+
  border: 0;
-
.slide_fade .btn li:first-child{margin-left:0;}
+
  font-size: 100%;
-
.slide_fade .btn .selected{position:relative;top:-3px;border-top:3px solid #f32465;}
+
  font: inherit;
-
.slide_fade .btn h3{padding:4px 0 0 0;font:12px/20px "\5b8b\4f53";text-indent:2px;}
+
  vertical-align: baseline;
-
.slide_fade .btn p{color:#999;font:12px/20px "\5b8b\4f53";text-indent:2px;}
+
}
-
.slide_fade .btn p a{color:#999;}
+
/* HTML5 display-role reset for older browsers */
-
.slide_fade .btn p a:hover{text-decoration:underline;}
+
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section {
 +
  display: block;
 +
}
 +
body {line-height: 1;}
 +
ol, ul {list-style: none;}
 +
blockquote, q {quotes: none;}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {content: ''; content: none;}
 +
table {border-collapse: collapse;border-spacing: 0;}
 +
html {background: #E4E4E4;}
 +
body {padding: 1px;font-family: 'Titillium Web', sans-serif;font-size: 16px;font-weight: 300;line-height: 22px;color: #666;}
 +
h1,h2,h3 {font-weight: 600;}
 +
a {text-decoration: none;}
 +
/* TITLES*/
 +
.pageTitle {
 +
display: block;
 +
margin: 0 0 0.2em 0;
 +
font-size: 2.2em;
 +
line-height: 1em;
 +
color: #3CA0D0;
 +
}
 +
.pageSubtitle {
 +
display: block;
 +
margin: 0 0 0.4em 0;
 +
font-size: 1.4em;
 +
line-height: 1em;
 +
color: #333;
 +
}
 +
/* EFFECTS */
 +
.roundedCorners {
 +
-webkit-border-radius: 5px;
 +
    border-radius: 5px;
 +
}
 +
 
 +
.roundedCornersTop {
 +
-webkit-border-radius: 5px 5px 0 0;
 +
border-radius: 5px 5px 0 0;
 +
}
 +
.roundedCornersBottom {
 +
-webkit-border-radius: 0 0 5px 5px;
 +
border-radius: 0 0 5px 5px;
 +
}
 +
.boxShadow {
 +
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 +
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 +
}
 +
/* LAYOUT*/
 +
.wrapper {width: 600px;margin: 20px auto;}
 +
.top {width: 100%;min-height: 300px;padding: 20px 0;text-align: center;}
 +
.main {width: 96%;padding: 2% 2% 5% 2%;margin: 5% 0;background: none;border-bottom: solid 1px #ccc;}
 +
.footer {width: 96%;padding: 2%;background: #222;border-top:solid 3px #086FA1;}
 +
/* GALLERY*/
 +
.galleryItem {
 +
display: inline-block;;
 +
position: relative;
 +
width: 250px;
 +
height: 250px;
 +
padding: 0;
 +
margin: 0 20px;
 +
border: solid 10px #fff;
 +
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 +
box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 +
}
 +
.galleryItem img {width: 250px;height: 250px;}
 +
.caption {position: relative;display: inline-block;width: 250px;height: 250px;z-index: 10;}
 +
.caption::before {
 +
content: attr(data-title);
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 250px;
 +
height: 0;
 +
font-family: 'Croissant One', cursive;
 +
font-size: 1.8em;
 +
font-weight: 600;
 +
line-height: 1.4em;
 +
color: #086FA1;
 +
background: #fff;
 +
overflow: hidden;
 +
-webkit-transition: all 0.3s ease;
 +
-moz-transition: all 0.3s ease;
 +
-ms-transition: all 0.3s ease;
 +
-o-transition: all 0.3s ease;
 +
transition: all 0.3s ease;
 +
}
 +
.caption::after {
 +
content: attr(data-description);
 +
position: absolute;
 +
bottom: -0;
 +
left: 0;
 +
width: 250px;
 +
height: 0;
 +
font-family: 'Poiret One', cursive;
 +
font-size: 1.1em;
 +
font-weight: 400;
 +
line-height: 1.4em;
 +
color: #fff;
 +
background: #222;
 +
overflow: hidden;
 +
-webkit-transition: all 0.3s ease;
 +
-moz-transition: all 0.3s ease;
 +
-ms-transition: all 0.3s ease;
 +
-o-transition: all 0.3s ease;
 +
transition: all 0.3s ease;
 +
}
 +
.caption:hover::before {height: 125px;}
 +
.caption:hover::after { bottom: 0;height: 125px;}
</style>
</style>
</head>
</head>
<body>
<body>
-
<div id="slide_fade" class="slide_fade">
+
<ul class="top">
-
<div class="box">
+
  <li class="galleryItem">
-
<ul class="list">
+
<a class="caption" href="#" data-title="Colored landscape" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien condimentum, sagittis erat rhoncus, bibendum nisi.">
-
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
+
    <img src="/jscss/demoimg/201312/2.jpg" alt="Landscape image">
-
<img src="/jscss/demoimg/201401/fade1.jpg">
+
</a>
-
<div class="txt">
+
</li>
-
<h3>玩转早春自驾游</h3>
+
  <li class="galleryItem">
-
<p>春暖花开，万物复苏；</p>
+
<a class="caption" href="#" data-title="Colored landscape" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien condimentum, sagittis erat rhoncus, bibendum nisi.">
-
<p>到处洋溢着花香的气息；</p>
+
    <img src="/jscss/demoimg/201312/3.jpg" alt="Landscape image">
-
<p>连上七天班的心蠢蠢欲动；</p>
+
</a>
-
<p>不如趁着清明小长假，来次放松心情的自驾游吧！</p>
+
</li>
-
</div>
+
<li class="galleryItem">
-
</a></li>
+
<a class="caption" href="#" data-title="Black & white photo" data-description="Vivamus ut sem id magna consequat porta vitae ut sem. Proin eget commodo risus, vitae blandit velit. ">
-
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
+
    <img src="/jscss/demoimg/201312/5.jpg" alt="Landscape image">
-
<img src="/jscss/demoimg/201401/fade2.jpg">
+
</a>
-
<div class="txt">
+
</li
-
<h3 style="color:#9E6452;">十二星座屌丝男把妹秘籍</h3>
+
</ul>
-
<p style="color:#9E6452;">窈窕淑女，屌丝好逑。</p>
+
-
<p style="color:#9E6452;">那么多美好的妹子，为什么一个都不是你的？</p>
+
-
<p style="color:#9E6452;">全速武装起来，妹子和机会一样，都喜欢有准备的人。</p>
+
-
<p style="color:#9E6452;">十二星座的单身男人们，发福利啦！</p>
+
-
</div>
+
-
</a></li>
+
-
<li style="position: absolute; top: 0px; left: 0px; z-index: 1;"><a href="/">
+
-
<img src="/jscss/demoimg/201401/fade3.jpg">
+
-
<div class="txt">
+
-
<h3>风调日和清明天</h3>
+
-
<p>气清景明，万物皆显，春意正浓</p>
+
-
<p>包含了扫墓祭祀的悼念哀思</p>
+
-
<p>和踏青游玩的欢笑嬉戏</p>
+
-
<p>好一派风调日和清明天~</p>
+
-
</div>
+
-
</a></li>
+
-
<li style="position: absolute; top: 0px; left: 0px; z-index: 2;"><a href="/">
+
-
<img src="/jscss/demoimg/201401/fade4.jpg">
+
-
<div class="txt">
+
-
<h3 style="color:#68262C;">愚人节玩具大作战</h3>
+
-
<p style="color:#333333;">每年的愚人节都是整蛊搞笑玩具纷纷现身的时候，</p>
+
-
<p style="color:#333333;">今年又有哪些意想不到的玩意呢？</p>
+
-
<p style="color:#333333;">小编为你搜罗了本年度大热的整蛊玩具，</p>
+
-
<p style="color:#333333;">在愚人节这天选上几样，"愚"乐一下你的朋友们吧~</p>
+
-
</div>
+
-
</a></li>
+
-
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
+
-
<img src="/jscss/demoimg/201401/fade5.jpg">
+
-
<div class="txt">
+
-
<h3 style="color:#8D5930;">家居大换装</h3>
+
-
<p style="color:#8D5930;">春天已经姗姗而来</p>
+
-
<p style="color:#8D5930;">青青小草破土而出，花儿争奇斗放</p>
+
-
<p style="color:#8D5930;">大自然到处都换上了春装</p>
+
-
<p style="color:#8D5930;">是不是该给家居也换个装了呢！</p>
+
-
</div>
+
-
</a></li>
+
-
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
+
-
<img src="/jscss/demoimg/201401/fade6.jpg">
+
-
<div class="txt">
+
-
<h3 style="color:#0C6796;">正是赏花好时节</h3>
+
-
<p style="color:#0C6796;">天气逐渐回暖，花朵开始绽放</p>
+
-
<p style="color:#0C6796;">或素雅，或娇艳，斑斓自若</p>
+
-
<p style="color:#0C6796;">春风暖意花香，直把游人熏醉</p>
+
-
<p style="color:#0C6796;">烟花三月下江南，正是赏花好时节。</p>
+
-
</div>
+
-
</a></li>
+
-
</ul>
+
-
</div>
+
-
<ul class="btn clearfix">
+
-
<li class="">
+
-
<a href="/">
+
-
<img src="/jscss/demoimg/201401/fade1.jpg" width="150" height="42">
+
-
<h3>玩转早春自驾游</h3>
+
-
</a>
+
-
<p>by <a href="/">不二周助</a></p>
+
-
</li>
+
-
<li class="">
+
-
<a href="/">
+
-
<img src="/jscss/demoimg/201401/fade2.jpg" width="150" height="42">
+
-
<h3>十二星座屌丝男把妹秘籍</h3>
+
-
</a>
+
-
<p>by <a href="/">阿布大人</a></p>
+
-
</li>
+
-
<li class="">
+
-
<a href="/">
+
-
<img src="/jscss/demoimg/201401/fade3.jpg" width="150" height="42">
+
-
<h3>风调日和清明天</h3>
+
-
</a>
+
-
<p>by <a href="/">伊丽莎白酱</a></p>
+
-
</li>
+
-
<li class="selected">
+
-
<a href="/">
+
-
<img src="/jscss/demoimg/201401/fade4.jpg" width="150" height="42">
+
-
<h3>愚人节玩具大作战</h3>
+
-
</a>
+
-
<p>by <a href="/">不二周助</a></p>
+
-
</li>
+
-
<li class="">
+
-
<a href="/">
+
-
<img src="/jscss/demoimg/201401/fade5.jpg" width="150" height="42">
+
-
<h3>家居大换装</h3>
+
-
</a>
+
-
<p>by <a href="/">樱桃小丸子</a></p>
+
-
</li>
+
-
<li class="">
+
-
<a href="/">
+
-
<img src="/jscss/demoimg/201401/fade6.jpg" width="150" height="42">
+
-
<h3>正是赏花好时节</h3>
+
-
</a>
+
-
<p>by <a href="/">伊丽莎白酱</a></p>
+
-
</li>
+
-
</ul>
+
-
</div>
+
-
 
+
-
<script src="/ajaxjs/jquery-1.6.2.min.js"></script>
+
-
<script>
+
-
(function(e){e.fn.cxSlide=function(t){if(!this.length)return;t=e.extend({},e.cxSlide.defaults,t);var n=this,r={};r.fn={};var i;r.box=n.find(".box"),r.list=r.box.find(".list"),r.items=r.list.find("li"),r.itemSum=r.items.length;if(r.itemSum<=1)return;r.numList=n.find(".btn"),r.numBtns=r.numList.find("li"),r.plusBtn=n.find(".plus"),r.minusBtn=n.find(".minus"),r.boxWidth=r.box.width(),r.boxHeight=r.box.height(),r.s=0;if(t.btn&&!r.numList.length){i="";for(var s=1;s<=r.itemSum;s++)i+="<li class='b_"+s+"'>"+s+"</li>";r.numList=e("<ul></ul>",{"class":"btn",html:i}).appendTo(n),r.numBtns=r.numList.find("li")}t.plus&&!r.plusBtn.length&&(r.plusBtn=e("<div></div>",{"class":"plus"}).appendTo(n)),t.minus&&!r.minusBtn.length&&(r.minusBtn=e("<div></div>",{"class":"minus"}).appendTo(n)),r.fn.on=function(){if(!t.auto)return;r.fn.off(),r.run=setTimeout(function(){r.fn.goto()},t.time)},r.fn.off=function(){typeof r.run!="undefined"&&clearTimeout(r.run)},r.fn.checkBtn=function(e){r.numList.length&&r.numBtns.eq(e).addClass("selected").siblings("li").removeClass("selected")},r.fn.goto=function(e){r.fn.off();var n=typeof e=="undefined"?r.s+1:parseInt(e,10),i=r.s,s=r.itemSum-1;if(n==r.s){r.fn.on();return}n>s?n=0:n<0&&(n=s),r.fn.checkBtn(n);var o;switch(t.type){case"x":o=r.boxWidth*n,n==0&&i==s?(r.items.eq(0).css({left:r.boxWidth*r.itemSum}),o=r.boxWidth*r.itemSum):i==0&&(r.items.eq(0).css({left:""}),r.box.scrollLeft(0)),r.box.stop(!0,!1).animate({scrollLeft:o},t.speed);break;case"y":o=r.boxHeight*n,n==0&&i==s?(r.items.eq(0).css({top:r.boxHeight*r.itemSum}),o=r.boxHeight*r.itemSum):i==0&&(r.items.eq(0).css({top:""}),r.box.scrollTop(0)),r.box.stop(!0,!1).animate({scrollTop:o},t.speed);break;case"fade":r.items.css({display:"none",position:"absolute",top:0,left:0,zIndex:""}),r.items.eq(i).css({display:"",zIndex:1}),r.items.eq(n).css({zIndex:2}).fadeIn(t.speed);break;case"toggle":r.items.eq(n).show().siblings("li").hide()}r.s=n,r.box.queue(function(){r.fn.on(),r.box.dequeue()})},r.box.hover(function(){r.fn.off()},function(){r.fn.on()}),t.btn&&r.numList.delegate("li",t.events,function(){r.fn.goto(r.numBtns.index(e(this)))}),t.plus&&r.plusBtn.bind(t.events,function(){r.fn.goto()}),t.minus&&r.minusBtn.bind(t.events,function(){r.fn.goto(r.s-1)}),r.fn.checkBtn(t.start),r.fn.goto(t.start)},e.cxSlide={defaults:{events:"click",type:"x",start:0,speed:800,time:5e3,auto:!0,btn:!0,plus:!1,minus:!1}}})(jQuery);
+
-
</script>
+
-
<script>
+
-
$("#slide_fade").cxSlide({events:"mouseover",type:"fade",speed:300});
+
-
</script>
+
</body>
</body>
</html>
</html>

Revision as of 08:23, 6 September 2014

<!DOCTYPE html> HTML5图片库