roll.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.02.22#
  ---
  use list:
  > global.lib.js
  > node.lib.js
  > events.lib.js
  > css.lib.js
  ---
  滚动效果
  ---
  包含样式：
  <link rel="stylesheet" href="css/roll.lib.css" type="text/css" />
*/

$Defined('Roll');
var Roll = {};

// Right to Left
Roll.Left = function (el /* :HTMLElement */, content /* :HTMLElement|String */) {
};

// Left to Right
Roll.Right = function (el /* :HTMLElement */, content /* :String */) {
};

// Bottom to Top
Roll.Top = function (el /* :HTMLElement */, content /* :String */, args /* :Object
        {
            scrollamount:(:Number), // 滚动量
            scrolldelaymin:(:Number), // 滚动延迟，滚动单一行的时间间隔
            scrolldelaymax:(:Number), // 滚动延迟，不同行间的时间间隔
        }
    */) {
    if (!el || !content) return;
    
    ///
    if (typeof args != 'object') args = {};
    if (typeof args.scrollamount != 'number')
        args.scrollamount = 30;
    if (typeof args.scrolldelaymin != 'number')
        args.scrolldelaymin = 50;
    if (typeof args.scrolldelaymax != 'number')
        args.scrolldelaymax = 2000;

    //
    CSS.AddClass(el, 'roll');

    //
    var one;
    if (oNode.IsNode(content)) {
        one = content;
    }
    else {
        one = oNode.CreateNode('div');
        oNode.AddNode(one, el);
        one.innerHTML = content;
    }
    CSS.AddClass(one, 'top-one');
    one.style.top = 0;

    // 单条信息返回
    if (Math.floor(one.offsetHeight / args.scrollamount) < 2) return;
    
    var childs = one.getElementsByTagName('li');
    for (var i = 0, len = childs.length; i < len; i++) {
        childs[i].style.height = args.scrollamount + 'px';
    }

    var two = one.cloneNode(true);
    oNode.AddNode(two, el);
    CSS.AddClass(one, 'top-two');
    two.style.top = one.offsetHeight + 'px';

    //
    // 是否经过
    var mouseover = false;
    // 滚动状态
    var overState = 0;
    // 滚动延迟
    var delay1 = args.scrolldelaymin;
    var delay2 = args.scrolldelaymax;
    // 滚动一屏的像素量
    var amount1 = args.scrollamount || 20;
    var amount2 = 0;
    // 计时器
    var interval;
    function roll () {
        if (amount2 == 0) {
            overState = 1;
            if (mouseover) return;

            if (parseInt(one.style.top) < -one.offsetHeight) {
                one.style.top = parseInt(two.style.top) + two.offsetHeight + 'px';
            }
            if (parseInt(two.style.top) < -two.offsetHeight) {
                two.style.top = parseInt(one.style.top) + one.offsetHeight + 'px';
            }
            amount2 = amount1;

            interval = setTimeout(roll, delay2);
            return;
        }
        overState = 0;
        amount2--;
        one.style.top = parseInt(one.style.top) - 1 + 'px';
        two.style.top = parseInt(two.style.top) - 1 + 'px';

        interval = setTimeout(roll, delay1);
    }
    roll();

    Events.AttachEvent(el, 'mouseover', function () {
        mouseover = true;
        if (overState == 1)
            clearTimeout(interval);
    });
    Events.AttachEvent(el, 'mouseout', function () {
        mouseover = false;
        if (overState == 1) {
            clearTimeout(interval);
            interval = setTimeout(roll, delay2);
        }
    });
};
/*
<div id="roll">
    <ul>
      <li>1</li>
      <li>2</li>
      ...
    </ul>
</div>
*/

// Top to Bottom
Roll.Bottom = function (el /* :HTMLElement */, content /* :String */) {
};