js滚动的效果

最新推荐文章于 2023-06-08 14:50:40 发布

xuandhu

最新推荐文章于 2023-06-08 14:50:40 发布

阅读量2.2k

点赞数

分类专栏： xml/javascript 文章标签： function null javascript command string table

本文链接：https://blog.csdn.net/xuandhu/article/details/236030

版权

xml/javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

function MarqueeBar(srcParElem,barWidth,barHeight,sleepTime,scrollDir,halign,valign)
{
    this.mID;
    this.container = srcParElem;
    this.width = barWidth;
    this.height = barHeight;
    this.sleepTime = (sleepTime == undefined)? MarqueeDefaultSleepTime : Math.abs(sleepTime);;
    this.hAlign    = (halign == undefined)? "LEFT" : halign;
    this.vAlign    = (valign == undefined)? "MIDDLE" : valign;
    this.direction = (scrollDir == undefined||(scrollDir != MarqueeBar.H && scrollDir != MarqueeBar.V))? MarqueeBar.H : scrollDir;
    this.marqueeBar   = null;
    this.msgContainer = null;
    this.templateRow = null;
    this.status       = -1;
    this.frameCount   = 10;
    this.scrollDelay = 50;
    this.msgQueue     = [];
    this.step;
    this.setTm
    this.init = function()
    {
        if(typeof this.container == "string")
        {
            this.container = document.getElementById(this.container);
        }
        if(this.container == undefined)
        {
            alert("Error: " + ERROR_CONTAINERNOTFOUND);
            return -1;
        }

this.setFrameCount(this.frameCount);

        this.marqueeBar = document.createElement("DIV");
        with(this.marqueeBar)
        {
            style.top = "0px";
            style.left = "0px";
            style.width = this.width + "px";
            style.height = this.height + "px";
            style.overflow = "hidden";
            style.position = "relative";
        }
        if(this.container.style.position == "block" ||
            this.container.style.position == "")
        {
            this.container.style.position = "relative";
        }
        this.style = this.marqueeBar.style;
        this.container.appendChild(this.marqueeBar);

        this.msgContainer = document.createElement("TABLE");
        with(this.msgContainer)
        {
            cellPadding = 0;
            cellSpacing = 0;
            style.top   = 0;
            style.left = 0;
            style.width       = "100%";
            style.position    = "relative";
            style.overflowX   = "hidden";
            style.tableLayout = "fixed";
        }
        this.marqueeBar.appendChild(this.msgContainer);
        var msgTemp = this.msgContainer.insertRow(0).insertCell(0);
        this.setStyle(msgTemp);

        MarqueeCollection[(this.mID = MarqueeCount++)] = this;
    }
    this.add = function(label,link)
    {
        this.msgQueue.push(new Array(label,link));
    }
    this.start = function()
    {
        if(this.status > 0 && this.start.caller != MarqueeBar ||
             this.container == undefined)
        {
            return;
        }
        if(this.status == 0)
        {
            this.restart();
            return;
        }
        this.status = 1;
        this.run();
    }
    this.run = function()
    {
        if(this.status == 0)
        {
            return;
        }
        //消息数为0，转到休眠,并等待是否有新消息;
        if(this.msgQueue.length == 0)
        {
            this.msgContainer.rows[0].cells[0].innerHTML = MarqueeBarNoMsg;
            this.msgContainer.rows[0].cells[0].reflectClass = this;
            this.sleep();
            return;
        }
        Js.removeListener(this.msgContainer.rows[0].cells[0],"mouseover",MarqueeBar.pause,false);
        Js.removeListener(this.msgContainer.rows[0].cells[0],"mouseout",MarqueeBar.restart,false);
        var newMsg = (this.direction == MarqueeBar.H)? this.msgContainer.insertRow(1).insertCell(0) : this.msgContainer.rows[0].insertCell(1);
        newMsg.reflectClass = this;
        newMsg.innerHTML = "<SPAN style='width:100%;' οnclick=Javascript:{try{eval(/"" + this.msgQueue[0][1] + "/");}catch(ex){alert(/"错误命令:/"+ex.description);}} style='cursor:hand'>"
                    + this.msgQueue[0][0]
                    + "</SPAN>";
        this.setStyle(newMsg);
        this.move();
    }
    this.move = function()
    {
        if(this.status == 0)
        {
            return;
        }
        if(this.direction == MarqueeBar.H)
        {
            if(Math.abs(this.msgContainer.offsetTop - this.step) < this.height)
            {
                this.msgContainer.style.top = this.msgContainer.offsetTop - this.step;
                setTimeout("MarqueeCollection["+this.mID+"].move()",this.scrollDelay);
            }
            else
            {
                this.msgContainer.deleteRow(0);
                this.msgContainer.style.top = 0;
                this.msgQueue.push(this.msgQueue.shift());
                if(this.status == 1)
                this.sleep();
            }
        }
        else if(this.direction == MarqueeBar.V)
        {
            if(Math.abs(this.msgContainer.offsetLeft - this.step) < this.width)
            {
                this.msgContainer.style.left = this.msgContainer.offsetLeft - this.step;
                setTimeout("MarqueeCollection["+this.mID+"].move()",this.scrollDelay);
            }
            else
            {
                this.msgContainer.rows[0].deleteCell(0);
                this.msgContainer.style.left = 0;
                this.msgQueue.push(this.msgQueue.shift());
                if(this.status == 1)
                this.sleep();
            }
        }
    }
    this.sleep = function()
    {
        Js.addListener(this.msgContainer.rows[0].cells[0],"mouseover",MarqueeBar.pause,false);
        Js.addListener(this.msgContainer.rows[0].cells[0],"mouseout",MarqueeBar.restart,false);

        if(this.sleep.caller == null)
        {
            return;
        }
        this.setTm = setTimeout("MarqueeCollection["+this.mID+"].run()",this.sleepTime);
    }

    this.pause = function()
    {
        clearTimeout(this.setTm);
        this.status = 0;
    }
    this.restart = function()
    {
        if(this.status == 1)
        {
            return;
        }
        this.setTm = setTimeout("MarqueeCollection["+this.mID+"].run()",this.sleepTime);
        this.status = 1;
    }
    this.setStyle = function(obj)
    {
        obj.style.overflow = "hidden";
        obj.style.width = this.width + "px";
        obj.style.height = this.height + "px";
        obj.style.font = "12px Verdana";

        try
        {    obj.align = this.hAlign;    }
        catch(ex)
        {    obj.align = "LEFT";    }
        try
        {    obj.parentNode.vAlign = this.vAlign;    }
        catch(ex)
        {    obj.parentNode.vAlign = "MIDDLE";    }
    }
    this.setSleepTime = function(t)
    {
        this.sleepTime = Math.abs(t);
    }
    this.setFrameCount = function(n)
    {
        this.frameCount = Math.abs(n);
        this.step = Math.floor(((this.direction == MarqueeBar.H)? this.height : this.width) / this.frameCount);
        if(this.step == 0)this.step = 1;
    }
    this.setScrollDelay = function(n)
    {
        this.scrollDelay = Math.abs(n);
    }
    this.setHAlign = function(halign)
    {
        this.hAlign = halign;
    }

    this.setVAlign = function(valign)
    {
        this.vAlign = valign;
    }

    this.setBackground = function(bgStyle)
    {
        this.marqueeBar.style.background = bgStyle;
    }
    this.setBorder = function(borderStyle)
    {
        this.marqueeBar.style.border = borderStyle;
    }

this.init();
}

MarqueeBar.H = MarqueeBar.h = "HORIZONTAL";
MarqueeBar.V = MarqueeBar.v = "VERTICAL";

MarqueeBar.pause = function()
{
    var srcElement = Js.getSrcElement(arguments[0]);
    while(srcElement.parentNode != null && srcElement.reflectClass == null)
    {
        srcElement = srcElement.parentNode;
    }
    if(srcElement.reflectClass != undefined)
    {
        srcElement.reflectClass.pause();
    }
}

MarqueeBar.restart = function()
{
    var srcElement = Js.getSrcElement(arguments[0]);
    while(srcElement.parentNode != null &&     srcElement.reflectClass == null)
    {
        srcElement = srcElement.parentNode;
    }
    if(srcElement.tagName == "TD")
    {
        srcElement.reflectClass.restart();
    }
}

function Js(){}

Js.getSrcElement = function(e)
{
return (e.target == null)? e.srcElement: e.target;
}

Js.addListener = function(srcObj,evt,dstFunc,flag)
{
    if(srcObj.attachEvent)
    {
        srcObj.attachEvent("on"+evt,dstFunc);
    }
    else if(srcObj.addEventListener)
    {
        srcObj.addEventListener(evt,dstFunc,flag);
    }
}

Js.removeListener = function(srcObj,evt,dstFunc,flag)
{
    if(srcObj.attachEvent)
    {
        srcObj.detachEvent("on"+evt,dstFunc);
    }
    else if(srcObj.removeEventListener)
    {
        srcObj.removeEventListener(evt,dstFunc,flag);
    }
}
</script>
<body>
<BR><BR>
<table><tr height=50>
<td id="v"><BR></td>
</tr>
<tr>
<td id="v2" height=50><BR></td>
</tr>
</table>
<script>
window.onload = function()
{

      var m1 = new MarqueeBar("v",150,50,200,MarqueeBar.H);
      m1.setBorder("0px solid #000000");
      m1.setBackground("#ffffff");
      m1.setHAlign("CENTER");
      m1.setVAlign("MIDDLE");
      m1.add("<img src='http://218.25.10.7:8080/2221.gif' align=absmiddle> 大家好，哈哈哈","window.open('http://www.21cn.com')");
      m1.add("<img src='http://218.25.10.7:8080/2222.gif' align=absmiddle> 请多多照顾哦~","alert('请多多照顾哦~')");
      m1.add("<img src='http://218.25.10.7:8080/2223.gif' align=absmiddle> 没人捧场~","alert('没人捧场~-_-||')");
      m1.start()

       var m1 = new MarqueeBar("v2",150,50,2000,MarqueeBar.V);
       m1.setBorder("1px solid #000000");
       m1.setBackground("#ffffff");
       m1.setHAlign("CENTER");
       m1.setVAlign("MIDDLE");
       m1.add("<img src='http://218.25.10.7:8080/2221.gif' align=absmiddle> 大家好，哈哈哈","alert('大家好，哈哈哈')");
       m1.add("<img src='http://218.25.10.7:8080/2222.gif' align=absmiddle> 请多多照顾哦~","alert('请多多照顾哦~')");
       m1.add("<img src='http://218.25.10.7:8080/2223.gif' align=absmiddle> 没人捧场~","alert('没人捧场~~-_-||')");
       m1.start()
}
</script>