Template:我的模板3

From 2008.igem.org

(Difference between revisions)
 
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<STYLE>.spanstyle {
+
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
    COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible
+
<title>无标题文档</title>
-
}
+
-
</STYLE>
+
</head>
</head>
-
<body onload=javascript:pageonload()>
+
<body>
 +
<script language="javascript">
 +
imgArr=new Array()
 +
imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/001.jpg border=0></a>"
 +
imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/002.jpg border=0></a>"
 +
imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/003.jpg border=0></a>"
 +
imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/004.jpg border=0></a>"
 +
imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/005.jpg border=0></a>"
 +
imgArr[5]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/006.jpg border=0></a>"
 +
imgArr[6]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/007.jpg border=0></a>"
 +
imgArr[7]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/008.jpg border=0></a>"
 +
imgArr[8]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/009.jpg border=0></a>"
 +
imgArr[9]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/0010.jpg border=0></a>"
 +
imgArr[10]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/0011.jpg border=0></a>"
 +
var moveStep=4        //步长，单位：pixel
 +
var moveRelax=100    //移动时间间隔，单位：ms
-
<SCRIPT language=javascript>
+
ns4=(document.layers)?true:false
-
    var message="我 爱 你 一 生 一 世 !";
+
-
    var x,y;
+
-
    var step=12;
+
-
    var flag=0;
+
-
    message=message.split("");
+
var displayImgAmount=4    //视区窗口可显示个数
-
    var xpos=new Array();
+
var divWidth=150    //每块图片占位宽
-
    for (i=0;i<=message.length-1;i++) {
+
var divHeight=200    //每块图片占位高
-
        xpos[i]=-50;
+
-
    }
+
-
    var ypos=new Array();
+
var startDnum=0
-
    for (i=0;i<=message.length-1;i++) {
+
var nextDnum=startDnum+displayImgAmount
-
        ypos[i]=-50;
+
var timeID
-
    }
+
var outHover=false
-
    function handlerMM(e) {
+
var startDivClipLeft
-
         x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10;
+
var nextDivClipRight
-
         y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
+
 
-
         flag=1;
+
function initDivPlace(){
 +
    if (ns4){
 +
         for (i=0;i<displayImgAmount;i++){
 +
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*i)
 +
        }
 +
        for (i=displayImgAmount;i<imgArr.length;i++){
 +
            eval("document.divOuter.document.divAds"+i+".left="+divWidth*displayImgAmount)
 +
         }
 +
    }else{
 +
        for (i=0;i<displayImgAmount;i++){
 +
            eval("document.all.divAds"+i+".style.left="+divWidth*i)
 +
        }
 +
        for (i=displayImgAmount;i<imgArr.length;i++){
 +
            eval("document.all.divAds"+i+".style.left="+divWidth*displayImgAmount)
 +
         }
     }
     }
 +
}
-
    function makesnake() {
+
function mvStart(){
-
        if (flag==1 && document.all) {
+
    timeID=setTimeout(moveLeftDiv,moveRelax)
-
                for (i=message.length-1; i>=1; i--) {
+
}
-
                  xpos[i]=xpos[i-1]+step;
+
-
                ypos[i]=ypos[i-1];
+
-
                }
+
-
            xpos[0]=x+step;
+
-
            ypos[0]=y;
+
-
            for (i=0; i<=message.length-1; i++) {
+
function mvStop(){
-
                    var thisspan = eval("span"+(i)+".style");
+
    clearTimeout(timeID)
-
                    thisspan.posLeft=xpos[i];
+
}
-
                thisspan.posTop=ypos[i];
+
-
                thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
+
-
                }
+
-
        }
+
-
        else if (flag==1 && document.layers) {
+
-
                for (i=message.length-1; i>=1; i--) {
+
-
                  xpos[i]=xpos[i-1]+step;
+
-
                ypos[i]=ypos[i-1];
+
-
                }
+
-
            xpos[0]=x+step;
+
-
            ypos[0]=y;
+
-
            for (i=0; i<message.length-1; i++) {
+
function moveLeftDiv(){
-
                    var thisspan = eval("document.span"+i);
+
    if (ns4){
-
                    thisspan.left=xpos[i];
+
        for (i=0;i<=displayImgAmount;i++){
-
                thisspan.top=ypos[i];
+
            eval("document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.divOuter.document.divAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")
-
                thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
+
-
            }
+
         }
         }
-
    }
 
-
</SCRIPT>
 
-
<SCRIPT language=javascript>
+
        startDivClipLeft=parseInt(eval("document.divOuter.document.divAds"+startDnum+".clip.left"))
-
    for (i=0;i<=message.length-1;i++) {
+
         nextDivClipRight=parseInt(eval("document.divOuter.document.divAds"+nextDnum+".clip.right"))
-
            document.write("<span id='span"+i+"' class='spanstyle'>");
+
-
         document.write(message[i]);
+
-
            document.write("</span>");
+
-
    }
+
-
    if (document.layers) {
+
        if (startDivClipLeft+moveStep>divWidth){
-
         document.captureEvents(Event.MOUSEMOVE);
+
            eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+divWidth)
 +
           
 +
            eval("document.divOuter.document.divAds"+startDnum+".left="+divWidth*displayImgAmount)
 +
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.divOuter.document.divAds"+nextDnum+".left+"+divWidth)
 +
            eval("document.divOuter.document.divAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")
 +
           
 +
           
 +
            startDnum=(++startDnum)%imgArr.length
 +
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
 +
           
 +
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
 +
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
 +
        }else{
 +
            eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0")
 +
            startDivClipLeft+=moveStep
 +
            nextDivClipRight+=moveStep
 +
         }
 +
        eval("document.divOuter.document.divAds"+startDnum+".clip.left="+startDivClipLeft)
 +
        eval("document.divOuter.document.divAds"+nextDnum+".clip.right="+nextDivClipRight)
 +
    }else{
 +
        for (i=0;i<=displayImgAmount;i++){
 +
            eval("document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")
 +
        }
 +
   
 +
        startDivClipLeft=parseInt(eval("document.all.divAds"+startDnum+".currentStyle.clipLeft"))
 +
        nextDivClipRight=parseInt(eval("document.all.divAds"+nextDnum+".currentStyle.clipRight"))
 +
   
 +
        if (startDivClipLeft+moveStep>divWidth){
 +
            eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+divWidth+","+divHeight+",0"+")'")
 +
           
 +
            eval("document.all.divAds"+startDnum+".style.left="+divWidth*displayImgAmount)
 +
            eval("document.all.divAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth)
 +
           
 +
            startDnum=(++startDnum)%imgArr.length
 +
            nextDnum=(startDnum+displayImgAmount)%imgArr.length
 +
           
 +
            startDivClipLeft=moveStep-(divWidth-startDivClipLeft)
 +
            nextDivClipRight=moveStep-(divWidth-nextDivClipRight)
 +
        }else{
 +
            startDivClipLeft+=moveStep
 +
            nextDivClipRight+=moveStep
 +
        }
 +
        eval("document.all.divAds"+startDnum+".style.clip='rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'")
 +
        eval("document.all.divAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+divHeight+",0)'")
     }
     }
-
    document.onmousemove = handlerMM;
 
-
</SCRIPT>
 
-
<SCRIPT language=javascript>
+
     if (outHover){
-
     function pageonload() {
+
         mvStop()
-
         makesnake();
+
    }else{
-
         window.setTimeout("pageonload();", 2);
+
         mvStart()
     }
     }
-
</SCRIPT>
+
   
-
 
+
   
 +
}
 +
function writeDivs(){
 +
    if (ns4){
 +
        document.write("<ilayer name=divOuter width=750 height="+divHeight+">")
 +
       
 +
        for (i=0;i<imgArr.length;i++){
 +
            document.write("<layer name=divAds"+i+">")
 +
            document.write(imgArr[i]+" ")
 +
            document.write("</layer>")
 +
        }
 +
        document.write("</ilayer>")
 +
        document.close()
 +
        for (i=displayImgAmount;i<imgArr.length;i++){
 +
            eval("document.divOuter.document.divAds"+i+".clip.right=0")
 +
        }
 +
    }else{
 +
        document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">")
 +
       
 +
        for (i=0;i<imgArr.length;i++){
 +
            document.write("<div id=divAds"+i+" style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>")
 +
            document.write(imgArr[i]+" ")
 +
            document.write("</div>")
 +
        }
 +
        document.write("</div>")
 +
        for (i=displayImgAmount;i<imgArr.length;i++){
 +
            eval("document.all.divAds"+i+".style.clip='rect(0,0,"+divHeight+",0)'")
 +
        }
 +
    }
 +
}
 +
</script>
 +
<BODY onload=javascript:mvStart()>
 +
<SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>

Latest revision as of 11:21, 18 October 2008

无标题文档

Retrieved from "http://2008.igem.org/Template:%E6%88%91%E7%9A%84%E6%A8%A1%E6%9D%BF3"