无间断滚动效果 htc

    marquee.htc

    复制代码 代码如下:

    //  描述        : 无间断滚动字幕
    //  版本        : 2.0
    //  作者        : 宝玉(WebUC.NET)
    //  最新更新    : 2004-10-26
    //  备            :

    <public:component>

    <public:attach event=”oncontentready” onevent=”f_Init()” />
    <public:attach event=”onpropertychange” onevent=”f_PropChange()” />
    <public:property name=”direction” />
    <public:property name=”speed” />
    <public:property name=”delay” />

    <public:method NAME=”marquee”/>
    <public:method NAME=”stop”/>
    <public:method NAME=”start”/>
    </public:component>

    <script language=”JScript”>

    var _oMarqueeContent;
    var _oMarquee;
    var _speed = 2;

    var _orientation;
    var _direction = “up”; 

    var _ContentWidth;
    var _ContentHeight;
    var _MarqueeWidth;
    var _MarqueeHeight;
    var _paddingTop;

    var _firstNode = 1;
    var _count = 0;

    var _timer = null;
    var _pause = false;

    var _marqueeInterval = 100;    // 滚动间隔
    var _delayInterval = 2000;    // 标题显示延迟间隔

    //+—————————————————————————-
    //  Function:       f_Init
    //  Description:    初始化
    //    Parameters:        null
    //  Returns:        null
    //—————————————————————————–
    function f_Init()
    {

        _oMarquee = document.createElement(“div”);
        _oMarqueeContent = document.createElement(“span”);
        _oMarqueeContent.innerHTML = element.innerHTML;
        _oMarquee.appendChild(_oMarqueeContent);
        element.innerHTML = “”;
        element.appendChild(_oMarquee);


        if(speed == null) speed = _speed;
        speed = parseInt(speed);
        if(!speed) speed =_speed;

        if(delay == null) delay = _delayInterval;
        delay = parseInt(delay);
        if(!delay) delay = _delayInterval;


        if(direction == null) direction =_direction;
        direction = direction.toLowerCase();
        if(direction != “left” && direction != “right” && direction != “up” && direction != “down”)
            direction = _direction;

        _orientation= (direction == “left” || direction == “right”) ? “horizontal” : “vertical”

        InitMarquee();

        marquee();
    }

    function InitMarquee()
    {

        _MarqueeWidth = _oMarquee.offsetWidth;
        _MarqueeHeight = _oMarquee.offsetHeight;
        _count = _oMarqueeContent.children.length;

        _ContentWidth = _oMarqueeContent.offsetWidth;
        _ContentHeight = _oMarqueeContent.offsetHeight;    

        _paddingTop = _oMarquee.offsetTop;

        FillMarquee()

        _oMarqueeContent.style.position = “relative”;
        _oMarqueeContent.style.pixelTop = 0;    

    }

    function FillMarquee()
    {
        var children = _oMarqueeContent.children;
        var i = 0;

        if (_orientation== “horizontal”)
        {
            while (_oMarqueeContent.offsetWidth < _ContentWidth + _MarqueeWidth)
            {
                _oMarqueeContent.appendChild(children[i++].cloneNode(true));
            }
        }
        else
        {
            while (_oMarqueeContent.offsetHeight < _ContentHeight + _MarqueeHeight)
            {
                _oMarqueeContent.appendChild(children[i++].cloneNode(true));
            }
        }
    }

    function marquee()
    {
        if (_pause)
            return;

        switch(direction)
        {
            case “up”:
                _oMarqueeContent.style.pixelTop -= speed;
                if(Math.abs(_oMarqueeContent.style.pixelTop + _ContentHeight + _paddingTop) < speed)
                    _oMarqueeContent.style.pixelTop = 0;

                
                if (Math.abs(_oMarqueeContent.children[_firstNode].offsetTop) – _paddingTop < speed)
                {
                    _firstNode++;
                    if (_firstNode >= _count)
                        _firstNode = 0;

                    _timer = window.setTimeout(uniqueID + “.marquee()”, _delayInterval);
                }
                else
                    _timer = window.setTimeout(uniqueID + “.marquee()”, _marqueeInterval);
                break;
        }
    }

    function stop()
    {
        clearTimer();
        _pause = true;
    }

    function start()
    {
        if (_timer != null)
            clearTimer();

        _pause = false;

        marquee();

    }

    function clearTimer()
    {
        window.clearTimeout(_timer);
        _timer = null;
    }

    //
    // Cancels an event
    //
    function f_CancelEvent()
    {
        event.returnValue = false;
    }

    //
    // A property changed
    //
    function f_PropChange()
    {
        switch (event.propertyName)
        {
            default:
                f_Redraw();
                break;
        }
    }

    //
    // Forces a redraw of the control
    //
    function f_Redraw()
    {

    }

    </script>


    HTML文件

    复制代码 代码如下:

    <style>
    body,td{
        font-size:9pt;
    }

    .marquee{
        overflow-y:hidden;word-break:break-all;padding:10px;
        behavior:url(‘marquee.htc’);
    }
    .marquee div{
        padding-bottom:10px;
    }
    </style>
    无间断滚动<br />
    每个标题间有停留<br />
    鼠标移入停止,鼠标移出继续滚动<br />

    <span style=”height:100px;width:200px;border:1px solid black;” delay=”3000″ class=”marquee” onmouseover=”this.stop()” onmouseout=”this.start()”>
            <div><a href=”http://www.webuc.net” target=”_blank”>1. 宝玉(http://www.webuc.net)作品</a></div>
            <div><a href=”http://www.webuc.net” target=”_blank”>2. 强强联手,助推上海建筑领域信息化建设</a> </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>3. 广联达清单招标投标策略研讨会——河南站圆满成功</a> </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>4. 足球友谊赛:河北电建一公司 VS 广联达石家庄分公司</a>  </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>5. 广联达——清单算量软件 GCL7.0新版出炉!</a> </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>6. 喜报:广联达公司顺利通过ISO9000质量管理体系三年复审</a> </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>7. 广联达-清单整体解决方案在北京求实造价咨询公司的成功应用</a> </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>8. 广联达-施工项目成本管理系统(GCM)在荣尊堡工程中的应用</a> </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>9. 广联达-工程概预算软件在北京建工集团总公司东方广场工程的应用</a> </div>
            <div><a href=”http://www.webuc.net” target=”_blank”>10. asdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</a> </div>
    </span>
    <script>

    </script>

Leave a Reply

Leave a Reply