筚路蓝缕

不因成就而狂妄、不因失落而气馁、不因欲望而沉重、不因嫉妒而困扰

Javascript

横向不间断连续滚动图片效果

Venlentine 
<head>
<script type="text/javascript">
imgArr = new Array();
imgArr[0] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover = 'javascript:outHover = true'; onMouseout = 'javascript: outHover = false;mvStart()'><img src = /eWebEditor/UploadFile / 2005327204719938.gif border = 0> </a>";
imgArr[1] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725420.gif border = 0> </a>";
imgArr[2] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725360.gif border = 0> </a>";
imgArr[3] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725406.gif border = 0> </a>";
imgArr[4] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725266.gif border = 0> </a>";
imgArr[5] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725696.gif border = 0> </a>";
imgArr[6] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204725993.gif border = 0> </a>";
imgArr[7] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726451.gif border = 0> </a>";
imgArr[8] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726631.gif border = 0> </a>";
imgArr[9] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726764.gif border = 0> </a>";
imgArr[10] = "<a href=Javascript:; onmouseMove='javascript:outHover=true'; onMouseover='javascript:outHover=true'; onMouseout='javascript:outHover=false;mvStart()'><img src=/eWebEditor / UploadFile / 2005327204726655.gif border = 0> </a>";
var moveStep = 4; //步长，单位：pixel
var moveRelax = 100; //移动时间间隔，单位：ms 
ns4 = (document.layers) ? true : false;
var displayImgAmount = 5; //视区窗口可显示个数 
var divWidth = 88; //每块图片占位宽 
var divHeight = 31; //每块图片占位高 
var startDnum = 0;
var nextDnum = startDnum + displayImgAmount;
var timeID;
var outHover = false;
var startDivClipLeft;
var nextDivClipRight;

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 mvStart() {
    timeID = setTimeout(moveLeftDiv, moveRelax);
}

function mvStop() {
    clearTimeout(timeID);
}

function moveLeftDiv() {
    if (ns4) {
        for (i = 0; i <= displayImgAmount; i++) {
            eval("document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left = document.divOuter.document.divAds" + parseInt((startDnum + i) % imgArr.length) + ".left - moveStep");
        }
        startDivClipLeft = parseInt(eval("document.divOuter.document.divAds" + startDnum + ".clip.left"));
        nextDivClipRight = parseInt(eval("document.divOuter.document.divAds" + nextDnum + ".clip.right"));
        if (startDivClipLeft + moveStep > divWidth) {
            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)'");
    }
    if (outHover) {
        mvStop();
    } else {
        mvStart();
    }
}

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>
</head>
<body onload=javascript:mvStart()>
<script type="text/javascript">
writeDivs(); initDivPlace();
</script>
</body>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部