Javascript 无缝滚动代码

[ 2007-04-07 17:05:22 | 作者: admin ]
字号: | |
p.s. 看上去不错,调用也简单
引用
//***********************************************************************************
// JavaScript HTML DIV scroll bar controler
//
// by mostone@hotmail.com 2005.06.15
//
// useage:
// create DIV scrollbar
// scroll directions: scroll up/ down/ left/ right
// setp 1:
// in HTML document, add a div tag and give "id" attribute
// setp 2:
// include this file into your HTML and etc document
// use "<script>" tag include src attribute
// setp 3:
// write your script
// exmple:
// var scrollBarControl = new scrollBar();
// scrollBarControl.addBar("myBarID", 100, 100, 50, "down");
// scrollBarcontrol.createScrollBars();
// finally:
// save your HTML document and test it.
//
//----------------------------------------------------------------------------------
// method:
// scrollBar()
// scrollBarControl class constrction
// without parameters
// addBar(barID, width, height, interval, direction)
// add user bar define
// parameters:
// barID (Required) String <DIV ID="xxx"> the id tag
// width (Optional) Integer that specifies the bar's width
// height (Optional) Integer that specifies the bar's height
// interval (Optional) Integer that specifies the number of milliseconds.
// direction (Optional) String that specifies the scroll direction
//
//***********************************************************************************

var __scrollBarControl = null;

function innerBarProp(barID, width, height, interval, direction)
{
    this.barID = barID;
    this.width = width;
    this.height = height;
    this.interval = interval;
    this.direction = direction;
    this.stopScroll = false;
    this.maxValue = 0;
    this.preValue = 0;
}

function scrollBar()
{
    this.barsArray = new Array();
    //save current object
    __scrollBarControl = this;
}

//////////////////////////////////////////////////////////////////
// add scrollbar to bar list and set properties
// parameters:
// barID: HTML's tag <DIV>'s id property
// (for js access the DIV object)
// width: define the scrollbar's width
// height: define the scrollbar's height
// interval: define the scroll speed
// ( scroll up/down per XX millinSecond )
// direction: scroll direction's defined
// "up"
// "down"
// "left"
// "right"
//////////////////////////////////////////////////////////////////
scrollBar.prototype.addBar = function(barID, width, height, interval, direction)
{
    //check parameters
    var paraCount = arguments.length;
    if ( paraCount < 1 )
    {
        alert("parameters count incorect!");
        return;
        //throw "parameters count inccorect!";
    }
   
    //width's default value
    if ( typeof( width ) == "undefined" )
    {
        var width = 100;
    }
   
    //height's default value
    if ( typeof( height ) == "undefined" )
    {
        var height = 100;
    }
   
    //interval's default value
    if ( typeof( interval ) == "undefined" )
    {
        var interval = 1000;
    }
   
    //direction's default value
    if ( typeof( direction ) == "undefined" )
    {
        var direction = "up";
    }
   
    //create scrollbar's inner properties
    var barProp = new innerBarProp(barID, width, height, interval, direction);
    var barCount = this.barsArray.length;
    this.barsArray[barCount] = barProp;
}

scrollBar.prototype.createScrollBars = function()
{
    //get bar's count
    var barCount = this.barsArray.length;
    //if no bar add to scrollControl do nothing
    if ( barCount == 0 )
    {
        return;
    }
   
    //init scroll bars
    for ( var i=0; i<barCount; i++ )
    {
        var objBarID = this.barsArray[i].barID;
        //if typeof objBarID is object
        // that's meaning it inited
        //if typeof objBarID is string
        // init that scroll bar
        if ( typeof( objBarID ) == "string" )
        {
            //get scroll <DIV> object
            var objBar = document.getElementById( objBarID );
            if (objBar == null)
            {
               //objBarID is not exist
               if ( document.readyState == "complete" || document.readyState == "loaded" )
               {
                   //the objBarID not exists in current document
                   //throw "the objBarID is not exists.";
                   alert("ScrollBar[" + objBarID + "]: not exist!");
                   return;
               }
               else
               {
                   //wait for document to load objBarID
                   window.setTimeout("__scrollBarControl.createScrollBars()",50);
                   //exit processing..........
                   //and wait next time callbak
                   return;
               }
            }
           
            //update barID
            this.barsArray[i].barID = objBar;
        }
    }
   
    for ( var i=0; i<barCount; i++ )
    {
        this.innerInitBar(i);
    }
}

scrollBar.prototype.innerInitBar = function (index)
{
    //get properties
    var barID = this.barsArray[index].barID;
    var width = this.barsArray[index].width;
    var height = this.barsArray[index].height;
    var interval = this.barsArray[index].interval;
    var direction = this.barsArray[index].direction;
    var maxValue = 0;
   
    //set scrollBar's properties
    with(barID)
    {
        style.width = width;
        style.height = height;
        noWrap=true;

        switch( direction )
        {
            case "up":
               maxValue = Math.max(scrollHeight, height);
               style.overflowX = "visible";
               style.overflowY = "hidden";
               var barHtml = innerHTML;
               var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
               newHtml += " <tr>\n";
               newHtml += " <td height='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " </tr>\n";
               newHtml += " <tr>\n";
               newHtml += " <td height='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " </tr>\n";
               newHtml += "</table>\n";
               innerHTML = newHtml;
               break;
            case "down":
               maxValue = Math.max(scrollHeight, height);
               style.overflowX = "visible";
               style.overflowY = "hidden";
               var barHtml = innerHTML;
               var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
               newHtml += " <tr>\n";
               newHtml += " <td height='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " </tr>\n";
               newHtml += " <tr>\n";
               newHtml += " <td height='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " </tr>\n";
               newHtml += "</table>\n";
               innerHTML = newHtml;
               scrollTop = maxValue;
               break;
            case "left":
               maxValue = Math.max(scrollWidth, width);
               style.overflowX = "hidden";
               style.overflowY = "visible";
               var barHtml = barID.innerHTML;
               var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
               newHtml += " <tr>\n";
               newHtml += " <td width='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " <td width='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " </tr>\n";
               newHtml += "</table>\n";
               innerHTML = newHtml;
               break;
            case "right":
               maxValue = Math.max(scrollWidth, width);
               style.overflowX = "hidden";
               style.overflowY = "visible";
               var barHtml = innerHTML;
               var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
               newHtml += " <tr>\n";
               newHtml += " <td width='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " <td width='" + maxValue + "' valign='top'>\n";
               newHtml += barHtml + "\n";
               newHtml += " </td>\n";
               newHtml += " </tr>\n";
               newHtml += "</table>\n";
               innerHTML = newHtml;
               scrollLeft = maxValue;
               break;
            default:
               //throw "direction is inccorect!";
               alert("ScrollBar[" + id + "]: direction is incorect!");
               return;
        }
       
        //set mouse events
        onmouseover = new Function("__scrollBarControl.mouseEvt(" + index + ",true);");
        onmouseout = new Function("__scrollBarControl.mouseEvt(" + index + ",false);");
        window.setInterval("__scrollBarControl.scroll(" + index + ");",interval);
       
        //save maxValue
        this.barsArray[index].maxValue = maxValue;
    }
}

scrollBar.prototype.mouseEvt = function(index, stop)
{
    this.barsArray[index].stopScroll = stop;
}

scrollBar.prototype.scroll = function(index)
{
    //get properties
    var barID = this.barsArray[index].barID;
    var width = this.barsArray[index].width;
    var height = this.barsArray[index].height;
    var interval = this.barsArray[index].interval;
    var direction = this.barsArray[index].direction;
    var stopScroll = this.barsArray[index].stopScroll;
    var preValue = this.barsArray[index].preValue;
    var maxValue = this.barsArray[index].maxValue;
   
    if ( stopScroll == true ) return;
   
    switch(direction)
    {
        case "up":
               preValue++;
               if ( preValue >= maxValue )
               {
                   preValue = 0;
               }
               barID.scrollTop = preValue;
               break;
        case "down":
               preValue--;
               if ( preValue <= 0 )
               {
                   preValue = maxValue;
               }
               barID.scrollTop = preValue;
               break;
        case "left":
               preValue++;
               if ( preValue >= maxValue )
               {
                   preValue = 0;
               }
               barID.scrollLeft = preValue;
               break;
        case "right":
               preValue--;
               if ( preValue <=0 )
               {
                   preValue = maxValue;
               }
               barID.scrollLeft = preValue;
               break;
    }
    this.barsArray[index].preValue = preValue;
}

//=================end of file===========================
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=848

这篇日志没有评论。

此日志不可发表评论。