"
Team:HZAU-China/Home
From 2013.igem.org
(Difference between revisions)
| Line 104: | Line 104: | ||
} | } | ||
</style> | </style> | ||
| + | |||
| + | <style> | ||
| + | body,div,ul,li{margin:0;padding:0;} | ||
| + | ul{list-style-type:none;} | ||
| + | body{background-color:transparent;text-align:center;font:12px/20px Arial;} | ||
| + | #box{position:relative;width:550px;height:410px;background-color:transparent;border-radius:5px;border:8px solid #000;margin:10px auto;cursor:pointer;} | ||
| + | #box .list{position:relative;width:540px;height:400px;overflow:hidden;} | ||
| + | #box .list ul{position:absolute;top:0;left:0;} | ||
| + | #box .list li{width:540px;height:400px;overflow:hidden;} | ||
| + | #box .count{position:absolute;right:0;bottom:5px;} | ||
| + | #box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;} | ||
| + | #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;} | ||
| + | #tmp{width:100px;height:100px;background:red;position:absolute;} | ||
| + | </style> | ||
| + | <script type="text/javascript"> | ||
| + | window.onload = function () | ||
| + | { | ||
| + | var oBox = document.getElementById("box"); | ||
| + | var oList = oBox.getElementsByTagName("ul")[0]; | ||
| + | var aImg = oBox.getElementsByTagName("img"); | ||
| + | var timer = playTimer = null; | ||
| + | var index = i = 0; | ||
| + | var bOrder = true; | ||
| + | var aTmp = []; | ||
| + | var aBtn = null; | ||
| + | |||
| + | //生成数字按钮 | ||
| + | for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>"); | ||
| + | |||
| + | //插入元素 | ||
| + | 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; | ||
| + | aBtn[i].onmouseover = function () | ||
| + | { | ||
| + | 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> | ||
<body> | <body> | ||
<div id="background11"> | <div id="background11"> | ||
<div id="picture"> | <div id="picture"> | ||
| - | + | <div id="box"> | |
| + | <div class="list"> | ||
| + | <ul> | ||
| + | <li><img src="/jscss/demoimg/201211/01.jpg" width="490" height="170" /></li> | ||
| + | <li><img src="/jscss/demoimg/201211/02.jpg" width="490" height="170" /></li> | ||
| + | <li><img src="/jscss/demoimg/201211/03.jpg" width="490" height="170" /></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
</div> | </div> | ||
<div id="paragraphs00"> | <div id="paragraphs00"> | ||
Revision as of 02:33, 14 September 2013
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.
