Team:Nanjing NFLS/humanpractice.html

From 2014hs.igem.org

(Difference between revisions)
Line 14: Line 14:
   </ul>
   </ul>
</div>
</div>
 +
</html>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<style>
 +
html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
 +
img,a img{border-style:none;border-width:0;}
 +
a,a:hover{ text-decoration:none;font-size:36px;}
 +
html {margin:0 auto;}
 +
ol,ul,li{list-style: none;font-size:36px;}:focus{outline: 0;}
 +
body{background-color:#eef9f8; color:#666}
 +
a,a:visited{ color:#666}
 +
a:hover {color:#009966;}
 +
span{font-size:36}
 +
.main{ font-family:宋体; color:#666; width:912px; margin:0 auto}
 +
.slider-scroll{margin-top:12px; overflow:hidden;height:421px;}
 +
#showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none}
 +
#showArea img{ opacity:0; display:none;}
 +
#scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat}
 +
#scrollDiv ul{ padding:19px 0 0 0}
 +
#scrollDiv li{width:250px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微软雅黑;}
 +
#scrollDiv li.on{ background:#003030; position:relative;}
 +
#scrollDiv li a{display:block; font-size:28px; height:35px; line-height:35px; color:#fff;}
 +
#scrollDiv li span{
 +
display: block;
 +
color: #CCCCCC;
 +
font-size: 36px;
 +
height: 15px;
 +
line-height: 15px;
 +
}
 +
#scrollDiv li span.entity-triangle{ display:none; }
 +
#scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;}
 +
</style>
 +
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
 +
<script type="text/javascript">
 +
$.extend({
 +
      manualScroll:function(opt,callback){
 +
          //alert("suc");
 +
          this.defaults = {
 +
              objId:"",
 +
              showArea:"",
 +
              showWidth:419,
 +
              showHeight:664,
 +
              showTitle: false,
 +
              width:350,
 +
              height:100,
 +
              picTimer:0,
 +
interval:5500
 +
          };
 +
          //参数初始化
 +
          var opts = $.extend(this.defaults,opt);
 +
var $objId = opts.objId;
 +
var $showArea = opts.showArea;
 +
var $showWidth = opts.showWidth;
 +
var $showHeight = opts.showHeight;
 +
var $showTitle = opts.showTitle;
 +
var $width = opts.width;
 +
var $height = opts.height;
 +
var $titleopacity = opts.titleopacity;
 +
var $picTimer = opts.picTimer;
 +
var index=0;
 +
var $len = $("#"+$objId).find("ul li").length;
 +
$("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth});
 +
$("#"+$objId).find("ul li").hover(function(){
 +
  index = $(this).index();
 +
  showimg(index);
 +
});
 +
$(".slider-scroll").hover(function(){
 +
              clearInterval($picTimer);
 +
              },function(){
 +
                  $picTimer = setInterval(function() {
 +
  if(index==$len-1)
 +
            {
 +
        index=0;
 +
            }
 +
else
 +
{
 +
    index+=1;
 +
}
 +
                      $("#"+$objId).find("ul li").removeClass("on");
 +
        $("#"+$objId).find("ul li").eq(index).addClass("on");
 +
$("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
 +
$("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
 +
                  },opts.interval);
 +
          }).trigger("mouseleave");
 +
function showimg(index)
 +
{
 +
if(index==$len)
 +
    {
 +
  index=0;
 +
    }
 +
  $("#"+$objId).find("ul li").removeClass("on");
 +
  $("#"+$objId).find("ul li").eq(index).addClass("on");
 +
  $("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
 +
  $("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
 +
  index+=1;
 +
}
 +
}
 +
});
 +
</script>
 +
</head>
 +
<body>
 +
<script type="text/javascript">
 +
//home
 +
$(document).ready(function(){
 +
$.manualScroll({
 +
objId:"scrollDiv",
 +
showArea:"showArea",
 +
showWidth:664,
 +
showHeight:419,
 +
showTitle: true,
 +
picTimer:0,
 +
interval:3000
 +
});
 +
});
 +
</script>
 +
<div class="main">
 +
<div  class="slider-scroll f-c">
 +
<div id="showArea">
 +
<a  target="_blank"><div style="display:block; opacity:1;">XYM loves XYM</div></a>
 +
<a  target="_blank"><img style="display:block; opacity:1;" src="https://static.igem.org/mediawiki/2014hs/1/12/NFLS_Wzn-done.png" width="664px" height="419px"></a>
 +
<a  target="_blank"><img style="display:block; opacity:1;" src="https://static.igem.org/mediawiki/2014hs/f/fc/NFLSLYF%281%29.png" width="664px" height="419px"></a>
 +
</div>
 +
<div id="scrollDiv">
 +
<ul>
 +
<li class="on"><a target="_blank">A Club</a><span class="entity-triangle"></span></li>
 +
<li ><a target="_blank">A HomePage</a><span class="entity-triangle"></span></li>
 +
<li ><a target="_blank">Acknowledgement</a><span class="entity-triangle"></span></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
<div style="text-align:center;clear:both">
 +
</div>
 +
</body>
</html>
</html>

Revision as of 03:29, 20 June 2014

iGEM Nanjing_NFLS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Retrieved from "http://2014hs.igem.org/Team:Nanjing_NFLS/humanpractice.html"