Team:HZAU-China

From 2013.igem.org

(Difference between revisions)
Line 17: Line 17:
     height: auto;
     height: auto;
     width: 535px;
     width: 535px;
-
     padding-top: 10px;
+
     padding-top: 17px;
-
     padding-left: 18px;
+
     padding-left: 20px;
     padding-bottom: 10px;
     padding-bottom: 10px;
}
}
Line 37: Line 37:
     font-size: 20px;
     font-size: 20px;
     text-align: justify;
     text-align: justify;
-
    border-style: solid;
+
 
-
    border-width: 7px;
+
-
    border-color: #ffd017;
+
}
}
-
p {
+
p{
     line-height: 1.3em;
     line-height: 1.3em;
}
}
Line 48: Line 46:
     float: right;
     float: right;
     height: auto;
     height: auto;
-
     width: 400px;
+
     width: 420px;
-
     padding:5px;
+
     margin:0;
}
}
#para1{
#para1{
Line 55: Line 53:
     float: right;
     float: right;
     height: auto;
     height: auto;
-
     width: 380px;
+
     width: 400px;
-
     padding-top:10px;
+
     margin:0;
-
}
+
-
#para2{
+
-
    background-color: transparent;
+
-
    float: right;
+
-
    height: auto;
+
-
    width: 380px;
+
-
    padding-left:10px;
+
-
    padding-right:10px;
+
}
}
 +
#background12{
#background12{
     background:url(https://static.igem.org/mediawiki/2013/8/80/Old_wall.jpg);
     background:url(https://static.igem.org/mediawiki/2013/8/80/Old_wall.jpg);
Line 105: Line 96:
</style>
</style>
-
<style>  
+
<head>
-
ul,li{margin:0;padding:0;}
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
ul{list-style-type:none;}
+
<title>图片轮播，选项卡，图片幻灯片效果</title>
-
#box{position:relative;width:525px;height:395px;background-color:transparent;border:7px solid #000;margin:0px auto;cursor:pointer;}
+
<style type="text/css">
-
#box .list{position:relative;width:525px;height:395px;overflow:hidden;}
+
body{padding:0;margin:0;}
-
#box .list ul{position:absolute;top:0;left:0;}
+
        h1{margin:0;}
-
#box .list li{width:525px;height:395px;overflow:hidden;}
+
.box{position:relative;width:525px;margin:0px auto;}
-
#box .count{position:absolute;right:0;bottom:5px;}
+
.cont{height:365px;overflow:hidden;}
-
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#ffd017;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
+
.item{background:rgba(0,0,0,0.5);color:#fff;font-size:40px;position:absolute;left:0;bottom:0;width:100%;text-align:right;line-height:20px;height:20px;}
-
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#7770b4;}
+
.item a{margin-right:5px;cursor:pointer;text-shadow:0 0 3px ;}
-
#tmp{width:100px;height:100px;background:red;position:absolute;}
+
a.seld{color:#ffd017;}
 +
a.hide{display:none;}
</style>
</style>
-
<script type="text/javascript">  
+
<script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
-
window.onload = function ()
+
<script type="text/javascript">
-
{
+
var n = 0;
-
var oBox = document.getElementById("box");
+
$(document).ready(function(){
-
var oList = oBox.getElementsByTagName("ul")[0];
+
count=$(".cont a").length;//显示区域的内容长度
-
var aImg = oBox.getElementsByTagName("img");
+
$(".item a").click(function(){
-
var timer = playTimer = null;
+
$(this).addClass("seld").siblings().removeClass("seld");
-
var index = i = 0;
+
var _index=$(this).index();//分屏的数字索引
-
var bOrder = true;
+
$(".cont>a").eq(_index).fadeIn(300).siblings().fadeOut(300);
-
var aTmp = [];
+
});
-
var aBtn = null;
+
t = setInterval("showAuto()", 2000);//执行定义好的函数
-
+
$(".box").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});/*当鼠标划向图片时终止定时器，离开时再调用定时器*/
-
//生成数字按钮
+
})
-
for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");
+
function showAuto()
-
+
-
//插入元素
+
-
var oCount = document.createElement("ul");
+
-
oCount.className = "count";
+
-
oCount.innerHTML = aTmp.join("");
+
-
oBox.appendChild(oCount);
+
-
aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
+
-
+
-
//初始化状态
+
-
cutover();
+
-
+
-
//按钮点击切换
+
-
for (i = 0; i < aBtn.length; i++)
+
{
{
-
aBtn[i].index = i;
+
n = n >=(count - 1)?0: ++n;
-
aBtn[i].onmouseover = function ()
+
$(".item a").eq(n).trigger('click');
-
{
+
}
-
index = this.index;
+
-
cutover()
+
-
}
+
-
}
+
-
+
-
function cutover()
+
-
{
+
-
for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
+
-
aBtn[index].className = "current";
+
-
startMove(-(index * aImg[0].offsetHeight))
+
-
}
+
-
+
-
function next()
+
-
{
+
-
bOrder ? index++ : index--;
+
-
index <= 0 && (index = 0, bOrder = true);
+
-
index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
+
-
cutover()
+
-
}
+
-
+
-
playTimer = setInterval(next, 3000);
+
-
+
-
//鼠标移入展示区停止自动播放
+
-
oBox.onmouseover = function ()
+
-
{
+
-
clearInterval(playTimer)
+
-
};
+
-
+
-
//鼠标离开展示区开始自动播放
+
-
oBox.onmouseout = function ()
+
-
{
+
-
playTimer = setInterval(next, 3000)
+
-
};
+
-
function startMove(iTarget)
+
-
{
+
-
clearInterval(timer);
+
-
timer = setInterval(function ()
+
-
{
+
-
doMove(iTarget)
+
-
}, 30)
+
-
}
+
-
function doMove (iTarget)
+
-
{
+
-
var iSpeed = (iTarget - oList.offsetTop) / 10;
+
-
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
+
-
oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"
+
-
}
+
-
};
+
</script>
</script>
 +
</head>
<body>
<body>
<div id="background11">
<div id="background11">
     <div id="picture">
     <div id="picture">
-
      <div id="box">
+
<div class="box">
-
      <div class="list">
+
    <div class="cont">
-
        <ul>
+
            <a><img src="https://static.igem.org/mediawiki/2013/3/3b/DSC_3461_%E5%89%AF%E6%9C%AC2_%E5%89%AF%E6%9C%AC.jpg" width="525" height="365" /></a>
-
             <li><img src="" width="525" height="395" /></li>
+
             <a class="hide"><img src="https://static.igem.org/mediawiki/2013/6/69/DSC_3467_%E5%89%AF%E6%9C%AC_%E5%89%AF%E6%9C%AC.jpg" width="525" height="365" /></a>
-
             <li><img src="" width="525" height="395" /></li>
+
             <a class="hide"><img src="https://static.igem.org/mediawiki/2013/9/90/DSC_3472_%E5%89%AF%E6%9C%AC_%E5%89%AF%E6%9C%AC.jpg" width="525" height="365" /></a>
-
             <li><img src="" width="525" height="395" /></li>
+
             <a class="hide"><img src="https://static.igem.org/mediawiki/2013/7/7d/DSC_3546_%E5%89%AF%E6%9C%AC_%E5%89%AF%E6%9C%AC.jpg" width="525" height="365" /></a>
-
         </ul>
+
            <a class="hide"><img src="https://static.igem.org/mediawiki/2013/7/71/DSC_3550_%E5%89%AF%E6%9C%AC_%E5%89%AF%E6%9C%AC.jpg" width="525" height="365" /></a>
-
      </div>
+
         </div>
-
      </div>
+
        <div class="item">
 +
        <a class="seld">·</a>
 +
            <a>·</a>
 +
            <a>·</a>
 +
            <a>·</a>
 +
            <a>·</a>
 +
        </div>
 +
        </div>
     </div>
     </div>
Line 216: Line 155:
       <div id="para1">
       <div id="para1">
           <div id="paragraphs02">
           <div id="paragraphs02">
-
           <center><span style="font-size:30px;font-weight:bold;font-family:Abstract;color:#ffd017;">Our Project</span></center>
+
           <p><span style="float:right;font-size:26.4px;font-family:Impact;color:#000000;line-height: 1.3em;">PROJECT: Safe Moving Vaccine Factory</span></p>
-
           </div>
+
           <p><span style="float:right;font-size:26.4px;font-family:Impact;color:#ffd017;line-height: 1.3em;">ABSTRACT</span></p>
-
          <div id="para2"> 
+
-
          <p font-family:times new roma;>The idea comes from Yersinia pestis and fleas. We make use of fleas as our moving injector. When flea feed blood from dogs, our vaccine vector Bacillus subtilis will be regurgitated into blood and successfully transferred to mammalian host. Bacillus subtilis can express antigens which can stimulate the immunity of dogs. Meanwhile, endogenous or exogenous expression of "Antimicrobial Peptides" by B. subtilis can kill Yersinia pestis in fleas. In this way we achieved a safe moving vaccine factory.</p>
+
           </div>
           </div>
 +
     
 +
          <p style="font-family:times new roman;">Oue idea comes from Yersinia pestis and fleas. We make use of fleas as our moving injector. When flea feed blood from dogs, our vaccine vector Bacillus subtilis will be regurgitated into blood and successfully transferred to mammalian host. Bacillus subtilis can express antigens which can stimulate the immunity of dogs. Meanwhile, endogenous or exogenous expression of "Antimicrobial Peptides" by B. subtilis can kill Yersinia pestis in fleas. In this way we achieved a safe moving vaccine factory.</p>
       </div>
       </div>
       </div>
       </div>

Revision as of 14:06, 23 September 2013

图片轮播，选项卡，图片幻灯片效果

PROJECT: Safe Moving Vaccine Factory

ABSTRACT

Oue idea comes from Yersinia pestis and fleas. We make use of fleas as our moving injector. When flea feed blood from dogs, our vaccine vector Bacillus subtilis will be regurgitated into blood and successfully transferred to mammalian host. Bacillus subtilis can express antigens which can stimulate the immunity of dogs. Meanwhile, endogenous or exogenous expression of "Antimicrobial Peptides" by B. subtilis can kill Yersinia pestis in fleas. In this way we achieved a safe moving vaccine factory.


Retrieved from "http://2013.igem.org/Team:HZAU-China"