Difference between revisions of "Team:DLUT China/test"

Line 1: Line 1:
 
<html>
 
<html>
−
      <head>
+
<head>
−
<meta charset="utf-8">
+
<meta charset="utf-8">
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<title>jQuery垂直选项卡图片滑动切换代码</title>
−
<title>Discription</title>
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<meta name="description" content="Free HTML5 Template by FREEHTML5.CO" />
+
−
<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
+
−
<meta name="author" content="FREEHTML5.CO" />
+
  
 +
<link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:DLUT_China/css/style1">
  
−
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
</head>
−
<link rel="shortcut icon" href="favicon.ico">
+
<body><script src="/demos/googlegg.js"></script>
  
−
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900' rel='stylesheet' type='text/css'>
+
<div class="tab">
−
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">
+
<div class="box">
−
+
<ul class="menus">
−
<!-- Animate.css -->
+
<li class="bg">tab1</li>
−
<link rel="stylesheet" href="https://2017.igem.org/Template:Tsinghua-A/CSS/animate?action=raw&ctype=text/css">
+
<li>tab2</li>
−
<!-- Icomoon Icon Fonts-->
+
<li>tab3</li>
−
<link rel="stylesheet" href="https://2017.igem.org/Template:Tsinghua-A/CSS/icomoon?action=raw&ctype=text/css">
+
<li>tab4</li>
−
<!-- Bootstrap  -->
+
<li>tab5</li>
−
<link rel="stylesheet" href="https://2017.igem.org/Template:Tsinghua-A/CSS/bootstrap?action=raw&ctype=text/css">
+
<li>tab6</li>
−
<!-- Superfish -->
+
<li>tab7</li>
−
<link rel="stylesheet" href="https://2017.igem.org/Template:Tsinghua-A/CSS/superfish?action=raw&ctype=text/css">
+
</ul>
−
<!-- Flexslider  -->
+
<div class="right">
−
<link rel="stylesheet" href="https://2017.igem.org/Template:Tsinghua-A/CSS/flexslider?action=raw&ctype=text/css">
+
<div class="scroll">
−
 
+
<div class="tab_right">
−
<link rel="stylesheet" href="https://2017.igem.org/Template:Tsinghua-A/CSS/style?action=raw&ctype=text/css">
+
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
−
      <script src="https://2017.igem.org/Template:Tsinghua-A/JS/fixed?action=raw&ctype=text/javascript">
+
</div>
−
 
+
<div class="tab_right">
−
<!-- Modernizr JS -->
+
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/modernizr-2.6.2.min?action=raw&ctype=text/javascript"></script>
+
</div>
−
<!-- FOR IE9 below -->
+
<div class="tab_right">
−
<!--[if lt IE 9]>
+
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/fixed?action=raw&ctype=text/javascript"></script>
+
</div>
−
<![endif]-->
+
<div class="tab_right">
−
 
+
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
−
    <style type="text/css">
+
</div>
−
 
+
<div class="tab_right">
−
#fh5co-hero {
+
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
−
  min-height: 600px;
+
</div>
−
  style:"background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;"
+
<div class="tab_right">
−
}
+
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
−
    .myTitle1 {
+
</div>
−
width:90%;
+
<div class="tab_right">
−
height:84px;
+
<img src="https://static.igem.org/mediawiki/2018/b/bb/T--DLUT_China--a1.png" alt="">
−
margin-left: 15%;
+
</div>
−
margin-bottom: 10px;
+
</div>
−
font-size: 40px;
+
−
}
+
−
.myTitle2 {
+
−
margin-left: 2%;
+
−
width:70%;;
+
−
z-index:10000;
+
−
left: 15%;
+
−
        background-color:transparent
+
−
}
+
−
    .myPara {
+
−
width:90%;
+
−
margin-left: 5%;
+
−
margin-bottom: 20px;
+
−
font-size: 20px;
+
−
text-align: left;
+
−
}
+
−
.myPS {
+
−
width:90%;
+
−
margin-left: 5%;
+
−
margin-bottom: 8px;
+
−
font-size: 16px;
+
−
text-align: left;
+
−
}
+
−
    .myPic1 {
+
−
font-size: 100px;
+
−
text-align: center;
+
−
margin-bottom: 15px;
+
−
}
+
−
    .myPicDis {
+
−
margin-left: 5%;
+
−
left: 45%;
+
−
top: 370px;
+
−
font-size: 18px;
+
−
}
+
−
.background {
+
−
position:absolute;
+
−
width:70%;;
+
−
z-index:10000;
+
−
top:300;
+
−
height:300;
+
−
left: 15%;
+
−
background-color:transparent
+
−
}
+
−
    </style>
+
−
   
+
−
    <style>
+
−
    .divcss{
+
−
width:650px;
+
−
height:500px;
+
−
margin-left: 5%;
+
−
}
+
−
    </style>
+
−
   
+
−
    </head>
+
−
 
+
−
<body>
+
−
<div id="fh5co-wrapper" >
+
−
<div id="fh5co-page">
+
−
<div id="fh5co-header">
+
−
+
−
+
 
</div>
 
</div>
−
<!-- end:fh5co-header -->
+
</div>
−
<aside id="fh5co-hero" class="js-fullheight" style="background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;">
+
<div class="clear"></div>
−
<br><br>
+
−
 
+
−
 
+
−
<div class="background">
+
−
 
+
−
<div  class="myTitle1"><img src="https://static.igem.org/mediawiki/2017/0/03/TsinghuaA-welcome.png"></div>
+
−
<div>
+
−
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tsinghua-A/picture_box/css/style_css?action=raw&ctype=text/css" media="screen">
+
−
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Team:Tsinghua-A/picture_box/css/nivo_slider_css?action=raw&ctype=text/css" media="screen">
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:Tsinghua-A/picture_box/js/jquery?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:Tsinghua-A/picture_box/js/jquery_easing?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="https://2017.igem.org/Team:Tsinghua-A/picture_box/js/jquery_nivo?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript">
+
−
//Slider
+
−
jQuery(window).load(function() {
+
−
jQuery('#slider').nivoSlider({
+
−
effect: 'fold',
+
−
slices:15,
+
−
animSpeed:500, //Slide transition speed
+
−
pauseTime:5000,
+
−
controlNav: false,
+
−
directionNavHide: false,
+
−
prevText: 'prev',
+
−
nextText: 'next',
+
−
startSlide:0, //Set starting Slide (0 index)
+
−
directionNav:true, //Next &amp; Prev
+
−
afterLoad: function(){
+
−
jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
+
−
},
+
−
beforeChange: function(){
+
−
jQuery(".nivo-caption").animate({top:"-300"}, {easing:"easeInBack", duration: 500})
+
−
},
+
−
afterChange: function(){
+
−
jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
+
−
}
+
−
});
+
−
+
−
});
+
−
 
+
−
</script>
+
−
 
+
−
<div id="slider-container">
+
−
 
+
−
<div id="slider" class="nivoSlider">
+
−
<img alt="" src="https://static.igem.org/mediawiki/2017/9/91/Main_farm.png">
+
−
<img alt="" src="https://static.igem.org/mediawiki/2017/f/f3/Doll.jpg">
+
−
<img alt="" src="https://static.igem.org/mediawiki/2017/0/02/Main_gene.jpg">
+
−
<img alt="" src="https://static.igem.org/mediawiki/2017/d/db/Main_frnt.jpg">
+
−
<img alt="" src="https://static.igem.org/mediawiki/2017/4/4c/Main_back.png">
+
−
</div><!-- #slider -->
+
−
+
 
</div>
 
</div>
−
<div class="flexslider js-fullheight"></div>
 
−
</aside>
 
  
−
<div style="position:fixed; top: 80%; left: 0%; width: 15%; font-size:16px;background-color:rgba(255,255,255,0.6)">For your better viewing experience, please adjust website to an optimized scale(ratio)</div>
+
<script src="js/jquery-1.8.3.min.js"></script>
−
<div id="fh5co-services-section" style="background: #fff url(https://static.igem.org/mediawiki/2017/thumb/8/87/TsinghuaA-backgroundpartten.jpeg/240px-TsinghuaA-backgroundpartten.jpeg) repeat;">
+
<script type="text/javascript" src="assets/index.js"></script>
  
−
<div class="myTitle2">
+
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
−
 
+
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
−
<table background-color="transparent" left="0%">
+
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
−
<tr>
+
−
<td><a href="https://2017.igem.org/Team:Tsinghua-A/Project"><img src="https://static.igem.org/mediawiki/2017/8/82/TsinghuaA-index_2.png" width="280" height="280"></a></td>
+
−
<td><a href="https://2017.igem.org/Team:Tsinghua-A/Model"><img src="https://static.igem.org/mediawiki/2017/9/99/TsinghuaA-index_3.png" width="280" height="280"></a></td>
+
−
<td><a href="https://2017.igem.org/Team:Tsinghua-A/Game"><img src="https://static.igem.org/mediawiki/2017/3/32/TsinghuaA-index_1.png" width="280" height="280"></a></td>
+
−
<td><a href="https://2017.igem.org/Team:Tsinghua-A/HP/Gold_Integrated"><img src="https://static.igem.org/mediawiki/2017/4/47/TsinghuaA-index_4.png" width="280" height="280"></a></td>
+
−
</tr>
+
−
</table>
+
−
<div>
+
 
</div>
 
</div>
−
 
+
</body>
−
</div>
+
−
 
+
−
 
+
−
 
+
−
</div>
+
−
<!-- END fh5co-page -->
+
−
 
+
−
</div>
+
−
<!-- END fh5co-wrapper -->
+
−
 
+
−
<!-- jQuery -->
+
−
 
+
−
 
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.min?action=raw&ctype=text/javascript"></script>
+
−
<!-- jQuery Easing -->
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.easing.1.3?action=raw&ctype=text/javascript"></script>
+
−
<!-- Bootstrap -->
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/bootstrap?action=raw&ctype=text/javascript"></script>
+
−
<!-- Waypoints -->
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.waypoints.min?action=raw&ctype=text/javascript"></script>
+
−
<!-- Superfish -->
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/hoverIntent?action=raw&ctype=text/javascript"></script>
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/superfish?action=raw&ctype=text/javascript"></script>
+
−
<!-- Flexslider -->
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/jquery.flexslider-min?action=raw&ctype=text/javascript"></script>
+
−
 
+
−
<!-- Main JS (Do not remove) -->
+
−
<script src="https://2017.igem.org/Template:Tsinghua-A/JS/main?action=raw&ctype=text/javascript"></script>
+
−
        <script src="fixed.js"></script>
+
−
</body>
+
 
</html>
 
</html>

Revision as of 11:46, 3 May 2018

jQuery垂直选项卡图片滑动切换代码

  • tab1
  • tab2
  • tab3
  • tab4
  • tab5
  • tab6
  • tab7

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源：懒人