连续图像垂直滚动条

时间:2012-03-29 10:43:21

标签: javascript image scroll infinite-loop marquee

我需要从http://javascript.about.com/library/blcvert.htm调整脚本以将滚动方向更改为DOWN。

有人可以帮忙吗?

当然,如果有人知道/有其他一些产生相同效果的脚本,也会有所帮助。

感谢名单

P.S。脚本(可读格式):


    var imgAry1 = ['img1.png','img2.png'];

    function startCloud() {
       new mq('clouds', imgAry1, 380);
       mqRotate(mqr);
    }

    $(document).ready(function() {
        startCloud();
    });

    var mqr = [];

    function mq(id, ary, heit) {
    this.mqo=document.getElementById(id);
    var wid = this.mqo.style.width;
    this.mqo.onmouseout=function() { mqRotate(mqr); };
    this.mqo.onmouseover=function() { clearTimeout(mqr[0].TO); };
    this.mqo.ary=[];
    var maxw = ary.length;
    for (var i=0;i<maxw;i++) {
        this.mqo.ary[i]=document.createElement('img');
        this.mqo.ary[i].src=ary[i];
        this.mqo.ary[i].style.position = 'absolute';
        this.mqo.ary[i].style.top = (heit*i)+'px';
        this.mqo.ary[i].style.height = heit+'px';
        this.mqo.ary[i].style.width = wid;
        this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
    }

    function mqRotate(mqr) {
    if (!mqr) return;
    for (var j=mqr.length - 1; j > -1; j--) {
        maxa = mqr[j].ary.length;
        for (var i=0;i<maxa;i++) {
            var x = mqr[j].ary[i].style;
            x.top=(parseInt(x.top,10)-1)+'px';
        }
        var y = mqr[j].ary[0].style;
        if (parseInt(y.top,10)+parseInt(y.height,10)<0) {
            var z = mqr[j].ary.shift();
            z.style.top = (parseInt(z.style.top) + parseInt(z.style.height)*maxa) + 'px';
            mqr[j].ary.push(z);
        }
    }
    mqr[0].TO=setTimeout('mqRotate(mqr)',10);
    }

1 个答案:

答案 0 :(得分:0)

在这一行:

x.top=(parseInt(x.top,10)-1)+'px';

它表示你以像素为单位x.top,解析数字,减去,然后再次添加'px'。元素从顶部的位置每次减少,因此它向上。你需要做的就是向下 添加

x.top=(parseInt(x.top,10)+1)+'px';

我还在您链接的页面上测试了这个假设:)