竖向滚动条code，改成横向滚动条。。。

<STYLE type=text/css>
.Container {BACKGROUND: url(bg.gif) #fff no-repeat; LEFT: 200px; WIDTH: 400px; POSITION: absolute; TOP: 50px; HEIGHT: 200px}
#Scroller-1 {OVERFLOW: hidden; WIDTH: 600px; POSITION: absolute; HEIGHT: 200px}
#Scroller-1 P {PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; MARGIN: 0px; COLOR: #6f6048; TEXT-INDENT: 20px; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.Scroller-Container {LEFT: 0px; POSITION: absolute; TOP: 0px}
#Scrollbar-Container {LEFT: 60px; POSITION: absolute; TOP: 40px}.top {CURSOR: pointer; POSITION: absolute}
.n {BACKGROUND: url(n.gif) no-repeat center center; LEFT: 4px; WIDTH: 20px; POSITION: absolute; TOP: 36px; HEIGHT: 161px}
.n1 {WIDTH: 20px; POSITION: absolute; HEIGHT: 22px}
.bottom {CURSOR: pointer; POSITION: absolute; TOP: 187px}
</STYLE><SCRIPT src="Scroller.js" type=text/javascript></SCRIPT>
<SCRIPT src="Scrollbar.js" type=text/javascript></SCRIPT>
<SCRIPT src="ScrollTween.js" type=text/javascript></SCRIPT><SCRIPT type=text/javascript>
var scroller  = null;
var scrollbar = null;
window.onload = function () {
  scroller  = new Scrolling.Scroller(document.getElementById("Scroller-1"), 400, 200);
  scrollbar = new Scrolling.Scrollbar(document.getElementById("Scrollbar-Container"), scroller, new Scrolling.ScrollTween());
}
</SCRIPT><META content="MSHTML 6.00.2900.2180" name=GENERATOR>
</HEAD>
<BODY>
<DIV id=Scrollbar-Container><IMG class=top src="top.gif"> <IMG class=bottom src="bottom.gif"> 
<DIV class=n><IMG class=n1 src="n1.gif"> 
</DIV>
</DIV>
        <DIV class=Container>
        <DIV id=Scroller-1>
        <DIV class=Scroller-Container style="border:1;border-color:blue;">           
           <table border=1 color=red><tr><td>
            <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
            et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
            Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
            conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
            volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
            lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
            hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
            interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
            elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
            </P>
            </td><tr><td>
            
            <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
            Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
            Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
            vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
            felis.
            </P>            <P>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec 
            nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, 
            vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit 
            dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem 
            ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper 
            wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
            </P>            <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
            et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
            Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
            conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
            volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
            lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
            hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
            interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
            elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
            </P>            <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
            Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
            Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
            vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
            felis.
            </P>            <P>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec 
            nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, 
            vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit 
            dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem 
            ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper 
            wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis 
            ornare.
            </P>
            </td></tr></table>
            
        </DIV>
        </DIV>
        </DIV>
</BODY>
</HTML>

解决方案 »

  1.   

    // Create scrolling variable if it doesn't exist
    if (!Scrolling) var Scrolling = {};//Scroller constructor
    Scrolling.Scroller = function (o, w, h, t) {
    //get the container
    var list = o.getElementsByTagName("div");
    for (var i = 0; i < list.length; i++)
            {if (list[i].className.indexOf("Scroller-Container") > -1) {o = list[i];}}

    //private variables
    var self  = this;
    var _vwidth   = w;
    var _vheight  = h;
    var _twidth   = o.offsetWidth
    var _theight  = o.offsetHeight;
    var _hasTween = t ? true : false;
    var _timer, _x, _y;

    //public variables
    this.onScrollStart = function (){};
    this.onScrollStop  = function (){};
    this.onScroll      = function (){};
    this.scrollSpeed   = 30;

    //private functions
    function setPosition (x, y) {
    if (x < _vwidth - _twidth) 
                x = _vwidth - _twidth;
    if (x > 0) 
                x = 0; 
            if (y < _vheight - _theight) 
                y = _vheight - _theight;
    if (y > 0) 
                y = 0; 
               _x = x; 
               _y = y; 
               o.style.left = _x +"px"; 
               o.style.top  = _y +"px";
            };

    //public functions
    this.scrollBy = function (x, y) {setPosition(_x - x, _y - y); this.onScroll();};
    this.scrollTo = function (x, y) {setPosition(-x, -y); this.onScroll();};
    this.startScroll = function (x, y) 
            {this.stopScroll();this.onScrollStart();
            _timer = window.setInterval(function (){ self.scrollBy(x, y); }, 
            this.scrollSpeed);};

    this.stopScroll  = function ()
            {if (_timer) window.clearInterval(_timer);
     this.onScrollStop();
        };

    this.reset = function ()
           {_twidth  = o.offsetWidth
    _theight = o.offsetHeight;
    _x = 0;
    _y = 0;

    o.style.left = "0px";
    o.style.top  = "0px";

    if (_hasTween) t.apply(this);
       };

    this.swapContent = function (c, w, h) 
           {o = c;
    var list = o.getElementsByTagName("div");
    for (var i = 0; i < list.length; i++)
               {if (list[i].className.indexOf("Scroller-Container") > -1) {o = list[i];}}

    if (w) _vwidth  = w;
    if (h) _vheight = h;
    reset();
       };

    this.getDimensions = function ()
           {return {vwidth  : _vwidth,
        vheight : _vheight,
        twidth  : _twidth,
        theight : _theight,
        x : -_x, y : -_y
           };
       };

    this.getContent = function () {return o;};
    this.reset();
    };
      

  2.   

    // Create scrolling variable if it doesn't exist
    if (!Scrolling) var Scrolling = {};//ScrollTween constructor
    Scrolling.ScrollTween = function ()
       {//private variables
    var self    = this;
    var _steps  = [0,25,50,70,85,95,97,99,100];
    var _values = [];
    var _idle   = true;
    var o, _inc, _timer;

    //private functions
       function tweenTo (y)
           {if (!_idle) return false;

    var d = o.getDimensions();
    if (y < 0) y = 0;
    if (y > d.theight - d.vheight)
    y = d.theight - d.vheight;

    var dist = y - d.y;
    _inc     = 0;
    _timer   = null;
    _values  = [];
    _idle    = false;

    for (var i = 0; i < _steps.length; i++) 
               {_values[i] = Math.round(d.y + dist * (_steps[i] / 100));} _timer = window.setInterval
                   ( function ()
                    {o.scrollTo(_values[_inc]); 
        if (_inc == _steps.length - 1) 
                      {window.clearInterval(_timer);
       _idle = true;}
                    else 
                      _inc++;},
                      o.stepSpeed
                    );
        };

    function tweenBy (y) 
          {o.tweenTo(o.getDimensions().y + y);};

    function setSteps (s) 
          {_steps = s;};

    //public functions
    this.apply = function (p) 
                   { o = p;
             o.tweenTo   = tweenTo;
             o.tweenBy   = tweenBy;
             o.setSteps  = setSteps;
             o.stepSpeed = 30;
               };
    };
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD><TITLE>jsScrollbar</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <STYLE type=text/css>
    .Container {BACKGROUND: url(bg.gif) #fff no-repeat; LEFT: 200px; WIDTH: 200px; POSITION: absolute; TOP: 50px; HEIGHT: 200px}
    #Scroller-1 {OVERFLOW: hidden; WIDTH: 200px; POSITION: absolute; HEIGHT: 200px}
    #Scroller-1 P {PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; MARGIN: 0px; COLOR: #6f6048; TEXT-INDENT: 20px; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
    .Scroller-Container {LEFT: 0px; POSITION: absolute; TOP: 0px}
    #Scrollbar-Container {LEFT: 60px; POSITION: absolute; TOP: 40px}.top {CURSOR: pointer; POSITION: absolute}
    .n {BACKGROUND: url(n.gif) no-repeat center center; LEFT: 4px; WIDTH: 20px; POSITION: absolute; TOP: 36px; HEIGHT: 161px}
    .n1 {WIDTH: 20px; POSITION: absolute; HEIGHT: 22px}
    .bottom {CURSOR: pointer; POSITION: absolute; TOP: 187px}
    </STYLE><SCRIPT src="Scroller.js" type=text/javascript></SCRIPT>
    <SCRIPT src="Scrollbar.js" type=text/javascript></SCRIPT>
    <SCRIPT src="ScrollTween.js" type=text/javascript></SCRIPT><SCRIPT type=text/javascript>
    var scroller  = null;
    var scrollbar = null;
    window.onload = function () {
      scroller  = new Scrolling.Scroller(document.getElementById("Scroller-1"), 200, 200);
      scrollbar = new Scrolling.Scrollbar(document.getElementById("Scrollbar-Container"), scroller, new Scrolling.ScrollTween());
    }
    </SCRIPT><META content="MSHTML 6.00.2900.2180" name=GENERATOR>
    </HEAD>
    <BODY>
    <DIV id=Scrollbar-Container>
    <IMG class=top src="top.gif"> 
    <IMG class=bottom src="bottom.gif"> 
    <DIV class=n>
    <IMG class=n1 src="n1.gif"> 
    </DIV>
    </DIV>    <DIV class=Container>
        <DIV id=Scroller-1>
            <DIV class=Scroller-Container style="border:1;border-color:blue;">           
               <table border="1" color="red" height="200" width="4000">
                <tr>
                <td>
                <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
                et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
                Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
                conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
                volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
                lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
                hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
                interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
                elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
                </P>
             </td>
                <td>
                <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
                Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
                Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
                vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
                felis.
                </P>
             </td>
                <td>            <P>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec 
                nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, 
                vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit 
                dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem 
                ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper 
                wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
                </P>
             </td>
                <td>            <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
                et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
                Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
                conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
                volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
                lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
                hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
                interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
                elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
                </P>
             </td>
                <td>            <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
                Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
                Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
                vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
                felis.
                </P>
             </td>
                <td>            <P>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec 
                nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, 
                vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit 
                dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem 
                ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper 
                wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis 
                ornare.
                </P>
                </td>
                   <td>
                <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
                et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
                Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
                conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
                volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
                lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
                hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
                interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
                elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
                </P>
             </td>
                <td>
                <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
                Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
                Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
                vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
                felis.
                </P>
             </td>
             </tr></table>
                
            </DIV>
            </DIV>
            </DIV>
    </BODY>
    </HTML>
      

  4.   

    scrollbar.js// Create scrolling variable if it doesn't exist
    if (!Scrolling) var Scrolling = {};//Scrollbar constructor
    Scrolling.Scrollbar = function (o, s, t)
       {//private variables
    var self = this;
    var _components = {};
    var _dimensions = {};
    var _temporary  = {};
    var _hasTween   = t ? true : false;
    var _timer, _ratio;

    //public variables
    this.onMouseDown   = function (){};
    this.onMouseUp     = function (){};
    this.onScroll      = function (){};
    this.scrollAmount  = 5;
    this.scrollSpeed   = 30;
    this.disabled      = false;

    //private functions
    function initialize ()
           {var c = _components;
    var d = _dimensions;
    var g = s.getDimensions();

    c.up     = findComponent("top", o);
    c.down   = findComponent("bottom", o);
    c.track  = findComponent("n", o);
    c.handle = findComponent("n1", c.track);

    d.trackTop     = findOffsetTop(c.track);
    d.trackHeight  = c.track.offsetHeight;
    d.handleHeight = c.handle.offsetHeight;
    d.x = 0;
    d.y = 0

    if (_hasTween) t.apply(self);

    addEvent(s.getContent(), "mousewheel", scrollbarWheel);
    addEvent(o, "mousedown", scrollbarClickPrimer);

    self.reset();
       };

    function findOffsetTop (o) {
    var t = 0;
    if (o.offsetParent) {
    while (o.offsetParent) {
    t += o.offsetTop;
    o  = o.offsetParent;
    }
    }
    return t;
    };

    function addEvent (o, t, f) {
    if (o.attachEvent) o.attachEvent('on'+ t, f);
    else o.addEventListener(t, f, false);
    };

    function removeEvent (o, t, f) {
    if (o.detachEvent) o.detachEvent('on'+ t, f);
    else o.removeEventListener(t, f, false);
    };

    function findComponent (c, o) {
    var kids = o.childNodes;
    for (var i = 0; i < kids.length; i++) {
    if (kids[i].className && kids[i].className.indexOf(c) >= 0) {
    return kids[i];
    }
    }
    };

    function scroll (y) {
    if (y < 0) y = 0;
    if (y > _dimensions.trackHeight - _dimensions.handleHeight)
    y = _dimensions.trackHeight - _dimensions.handleHeight; _components.handle.style.top = y +"px";
    _dimensions.y = y;

    s.scrollTo( Math.round(_dimensions.y * _ratio),0);
    self.onScroll();
    };

    function scrollbarClickPrimer (e) {
    if (self.disabled) return false;

    e = e?e:event;
    if (!e.target) e.target = e.srcElement;

    scrollbarClick(e.target.className, e);
    };

    function scrollbarClick (c, e) {
    var d  = _dimensions;
    var t  = _temporary;
    var cy = e.clientY + document.body.scrollTop;

    if (c.indexOf("top") >= 0)
    startScroll(-self.scrollAmount);

    if (c.indexOf("bottom") >= 0) 
    startScroll(self.scrollAmount);

    if (c.indexOf("n") >= 0)
    if (_hasTween) self.tweenTo((cy - d.trackTop - d.handleHeight / 2) * _ratio);
    else scroll(cy - d.trackTop - d.handleHeight / 2);

    if (c.indexOf("n1") >= 0) {
    t.grabPoint = cy - findOffsetTop(_components.handle);
    addEvent(document, "mousemove", scrollbarDrag, false);
    }

    t.target = e.target;
    t.select = document.onselectstart;

    document.onselectstart = function (){ return false; };
    self.onMouseDown(e.target, c, e);

    addEvent(document, "mouseup", stopScroll);
    };

    function scrollbarDrag (e) {
    e = e?e:event;
    var d = _dimensions;
    var t = parseInt(_components.handle.style.top);
    var v = e.clientY + document.body.scrollTop - d.trackTop;

    if (v >= d.trackHeight - d.handleHeight + _temporary.grabPoint)
    v = d.trackHeight - d.handleHeight;

    else if (v <= _temporary.grabPoint)
    v = 0;

    else v = v - _temporary.grabPoint;

    scroll(v);
    };

    function scrollbarWheel (e) {
    if (self.disabled) return false;

    e = e ? e : event;
    var dir = 0;
    if (e.wheelDelta >= 120) dir = -1;
    if (e.wheelDelta <= -120) dir = 1; self.scrollBy(dir * 20);
    e.returnValue = false;
    };

    function startScroll (y) {
    _temporary.disty = y;
    _timer = window.setInterval(function () {
    self.scrollBy(_temporary.disty);
    }, self.scrollSpeed);
    };

    function stopScroll (e) {
    e = e?e:event;

    removeEvent(document, "mousemove", scrollbarDrag);
    removeEvent(document, "mouseup", stopScroll);

    document.onselectstart = _temporary.select;
    if (_timer) window.clearInterval(_timer);

    self.onMouseUp(_temporary.target, _temporary.target.className, e);
    };

    //public functions
    this.reset = function () {
    var d = _dimensions;
    var c = _components;
    var g = s.getDimensions();

    // _ratio = (g.theight - g.vheight) / (d.trackHeight - d.handleHeight);
    _ratio = (g.twidth - g.vwidth) / (d.trackHeight - d.handleHeight);

    c.handle.ondragstart = function (){ return false; };
    c.handle.onmousedown = function (){ return false; };
    c.handle.style.top   = "0px";
    d.y = 0;

    s.reset();
    scroll(0);

    if (g.twidth < g.vwidth) {
    this.disabled = true;
    o.className  += " Scrollbar-Disabled";
    }
    };

    this.scrollTo = function (y) {
    scroll(y / _ratio);
    };

    this.scrollBy = function (y) {
    scroll((s.getDimensions().y + y) / _ratio);
    };

    this.swapContent = function (n, w, h) {
    o = n;
    s.swapContent(o, w, h);
    initialize();
    };

    this.disable = function () {
    this.disabled = true;
    o.className  += "Scrollbar-Disabled";
    };

    this.enable = function () {
    this.disabled = false;
    o.className = o.className.replace(/Scrollbar\-Disabled/, "");
    };

    this.getContent = function () {
    return s.getContent();
    };

    this.getComponents = function () {
    return _components;
    };

    this.getDimensions = function () {
    var d = s.getDimensions();
    d.trackHeight  = _dimensions.trackHeight;
    d.handleHeight = _dimensions.handleHeight;

    return d;
    };

    initialize();
    };
      

  5.   

    scroller.js// Create scrolling variable if it doesn't exist
    if (!Scrolling) var Scrolling = {};//Scroller constructor
    Scrolling.Scroller = function (o, w, h, t) {
    //get the container
    var list = o.getElementsByTagName("div");
    for (var i = 0; i < list.length; i++)
            {if (list[i].className.indexOf("Scroller-Container") > -1) {o = list[i];}}

    //private variables
    var self  = this;
    var _vwidth   = w;
    var _vheight  = h;
    var _twidth   = o.offsetWidth
    var _theight  = o.offsetHeight;
    var _hasTween = t ? true : false;
    var _timer, _x, _y;

    //public variables
    this.onScrollStart = function (){};
    this.onScrollStop  = function (){};
    this.onScroll      = function (){};
    this.scrollSpeed   = 30;

    //private functions
    function setPosition (x, y) {
    if (x < _vwidth - _twidth) 
                x = _vwidth - _twidth;
    if (x > 0) 
                x = 0; 
            if (y < _vheight - _theight) 
                y = _vheight - _theight;
    if (y > 0) 
                y = 0; 
               _x = x; 
               _y = y; 
               o.style.left = _x +"px"; 
               o.style.top  = _y +"px";
            };

    //public functions
    this.scrollBy = function (x, y) {setPosition(_x - x, _y - y); this.onScroll();};
    this.scrollTo = function (x, y) {setPosition(-x, -y); this.onScroll();};
    this.startScroll = function (x, y) 
            {this.stopScroll();this.onScrollStart();
            _timer = window.setInterval(function (){ self.scrollBy(x, y); }, 
            this.scrollSpeed);};

    this.stopScroll  = function ()
            {if (_timer) window.clearInterval(_timer);
     this.onScrollStop();
        };

    this.reset = function ()
           {_twidth  = o.offsetWidth
    _theight = o.offsetHeight;
    _x = 0;
    _y = 0;

    o.style.left = "0px";
    o.style.top  = "0px";

    if (_hasTween) t.apply(this);
       };

    this.swapContent = function (c, w, h) 
           {o = c;
    var list = o.getElementsByTagName("div");
    for (var i = 0; i < list.length; i++)
               {if (list[i].className.indexOf("Scroller-Container") > -1) {o = list[i];}}

    if (w) _vwidth  = w;
    if (h) _vheight = h;
    reset();
       };

    this.getDimensions = function ()
           {return {vwidth  : _vwidth,
        vheight : _vheight,
        twidth  : _twidth,
        theight : _theight,
        x : -_x, y : -_y
           };
       };

    this.getContent = function () {return o;};
    this.reset();
    };
      

  6.   

    竖向滚动 www.baotou163.com/code.rar 谁用，拿去
      

  7.   


    就像我跟你说的，打开画图旋转90度就ok，photoshop也行，简单吧，说明你会就不难！
    就像js你们都说【chinmo 自己参考一下横向的，稍微改一下就好了】，我知道不难，但是学艺不精，实际上对我很难。
    正在看【精通JavaScript.pdf】，js的这个语言跟以前的那些语言用法上确实是有很大的区别！
      

  8.   

    因为做这个网站需要动用的工具太多了，Excel(vba)数据分析，VB，PhotoShop、CorelDRW图片处理，照相机、摄像机拍照，视频剪辑软件，ASP，CSS，数据库，最近前端又开始用JS了，那个也没法精下去！光编辑软件就试用了一堆：UltraEdit、EditPlus、EmEditor、PSPad、SciTE、gvim、notepad2、Notepad++，大环境再不变好，就要呜呼哀哉了！
      

  9.   

    HOHO
    我就只有一台笔记本电脑和文本编辑器。
    其实，最主要是懒得去做那个。
      

  10.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD><TITLE>jsScrollbar</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    <STYLE type=text/css>
    .Container {BACKGROUND: url(bg.gif) #fff no-repeat; LEFT: 200px; WIDTH: 200px; POSITION: absolute; TOP: 50px; HEIGHT: 200px}
    #Scroller-1 {OVERFLOW: hidden; WIDTH: 200px; POSITION: absolute; HEIGHT: 200px}
    #Scroller-1 P {PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; MARGIN: 0px; COLOR: #6f6048; TEXT-INDENT: 20px; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
    .Scroller-Container {LEFT: 0px; POSITION: absolute; TOP: 0px}
    #Scrollbar-Container {LEFT: 200px; POSITION: absolute; TOP: 260px}.top {CURSOR: pointer; POSITION: absolute}
    .n {BACKGROUND: url(n.gif) no-repeat center center; TOP: 3px; HEIGHT: 20px; POSITION: absolute; LEFT: 36px; WIDTH: 161px}
    .n1 {WIDTH: 22px; POSITION: absolute; HEIGHT: 20px}
    .bottom {CURSOR: pointer; POSITION: absolute; left: 187px}
    </STYLE><SCRIPT src="Scroller.js" type=text/javascript></SCRIPT>
    <SCRIPT src="Scrollbar.js" type=text/javascript></SCRIPT>
    <SCRIPT src="ScrollTween.js" type=text/javascript></SCRIPT><SCRIPT type=text/javascript>
    var scroller  = null;
    var scrollbar = null;
    window.onload = function () {
      scroller  = new Scrolling.Scroller(document.getElementById("Scroller-1"), 200, 200);
      scrollbar = new Scrolling.Scrollbar(document.getElementById("Scrollbar-Container"), scroller, new Scrolling.ScrollTween());
    }
    </SCRIPT><META content="MSHTML 6.00.2900.2180" name=GENERATOR>
    </HEAD>
    <BODY>
    <DIV id=Scrollbar-Container>
    <IMG class=top src="top.gif"> 
    <IMG class=bottom src="bottom.gif"> 
    <DIV class=n>
    <IMG class=n1 src="n1.gif"> 
    </DIV>
    </DIV>    <DIV class=Container>
        <DIV id=Scroller-1>
            <DIV class=Scroller-Container style="border:1;border-color:blue;">           
               <table border="1" color="red" height="200" width="4000">
                <tr>
                <td>
                <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
                et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
                Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
                conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
                volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
                lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
                hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
                interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
                elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
                </P>
             </td>
                <td>
                <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
                Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
                Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
                vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
                felis.
                </P>
             </td>
                <td>            <P>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec 
                nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, 
                vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit 
                dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem 
                ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper 
                wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis ornare.
                </P>
             </td>
                <td>            <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
                et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
                Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
                conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
                volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
                lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
                hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
                interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
                elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
                </P>
             </td>
                <td>            <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
                Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
                Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
                vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
                felis.
                </P>
             </td>
                <td>            <P>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse mollis dui nec 
                nunc. Nam tristique, ante vitae imperdiet vestibulum, elit nulla rhoncus nisl, 
                vitae tincidunt dolor dui eu mi. In hac habitasse platea dictumst. Nunc blandit 
                dolor vel mauris. Proin wisi. Nam pharetra ultrices tellus. Sed arcu. Lorem 
                ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ultricies semper 
                wisi. Sed nisl. Donec blandit. Nunc vitae urna sed nisl mattis 
                ornare.
                </P>
                </td>
                   <td>
                <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante 
                et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. 
                Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per 
                conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum 
                volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut 
                lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In 
                hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, 
                interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit 
                elementum, dolor ligula ultrices neque, in elementum ante erat et elit.
                </P>
             </td>
                <td>
                <P>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. 
                Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. 
                Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt 
                vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque 
                felis.
                </P>
             </td>
             </tr></table>
                
            </DIV>
            </DIV>
            </DIV>
    </BODY>
    </HTML>
      

  11.   

    scrollbar.js// Create scrolling variable if it doesn't exist
    if (!Scrolling) var Scrolling = {};//Scrollbar constructor
    Scrolling.Scrollbar = function (o, s, t)
       {//private variables
    var self = this;
    var _components = {};
    var _dimensions = {};
    var _temporary  = {};
    var _hasTween   = t ? true : false;
    var _timer, _ratio;

    //public variables
    this.onMouseDown   = function (){};
    this.onMouseUp     = function (){};
    this.onScroll      = function (){};
    this.scrollAmount  = 5;
    this.scrollSpeed   = 30;
    this.disabled      = false;

    //private functions
    function initialize ()
           {var c = _components;
    var d = _dimensions;
    var g = s.getDimensions();

    c.up     = findComponent("top", o);
    c.down   = findComponent("bottom", o);
    c.track  = findComponent("n", o);
    c.handle = findComponent("n1", c.track);

    d.trackLeft     = findOffsetLeft(c.track);
    d.trackWidth  = c.track.offsetWidth;
    d.handleWidth = c.handle.offsetWidth;
    d.x = 0;
    d.y = 0

    if (_hasTween) t.apply(self);

    addEvent(s.getContent(), "mousewheel", scrollbarWheel);
    addEvent(o, "mousedown", scrollbarClickPrimer);

    self.reset();
       };

    function findOffsetLeft (o) {
    var t = 0;
    if (o.offsetParent) {
    while (o.offsetParent) {
    t += o.offsetLeft;
    o  = o.offsetParent;
    }
    }
    return t;
    };

    function addEvent (o, t, f) {
    if (o.attachEvent) o.attachEvent('on'+ t, f);
    else o.addEventListener(t, f, false);
    };

    function removeEvent (o, t, f) {
    if (o.detachEvent) o.detachEvent('on'+ t, f);
    else o.removeEventListener(t, f, false);
    };

    function findComponent (c, o) {
    var kids = o.childNodes;
    for (var i = 0; i < kids.length; i++) {
    if (kids[i].className && kids[i].className.indexOf(c) >= 0) {
    return kids[i];
    }
    }
    };

    function scroll (x) {
    if (x < 0) x = 0;
    if (x > _dimensions.trackWidth - _dimensions.handleWidth)
    x = _dimensions.trackWidth - _dimensions.handleWidth; _components.handle.style.left = x +"px";
    _dimensions.x = x;

    s.scrollTo( Math.round(_dimensions.x * _ratio),0);
    self.onScroll();
    };

    function scrollbarClickPrimer (e) {
    if (self.disabled) return false;

    e = e?e:event;
    if (!e.target) e.target = e.srcElement;

    scrollbarClick(e.target.className, e);
    };

    function scrollbarClick (c, e) {
    var d  = _dimensions;
    var t  = _temporary;
    var cx = e.clientX + document.body.scrollLeft;

    if (c.indexOf("top") >= 0)
    startScroll(-self.scrollAmount);

    if (c.indexOf("bottom") >= 0) 
    startScroll(self.scrollAmount);

    if (c.indexOf("n") >= 0)
    if (_hasTween) self.tweenTo((cx - d.trackLeft - d.handleWidth / 2) * _ratio);
    else scroll(cx - d.trackLeft - d.handleWidth / 2);

    if (c.indexOf("n1") >= 0) {
    t.grabPoint = cx - findOffsetLeft(_components.handle);
    addEvent(document, "mousemove", scrollbarDrag, false);
    }

    t.target = e.target;
    t.select = document.onselectstart;

    document.onselectstart = function (){ return false; };
    self.onMouseDown(e.target, c, e);

    addEvent(document, "mouseup", stopScroll);
    };

    function scrollbarDrag (e) {
    e = e?e:event;
    var d = _dimensions;
    var t = parseInt(_components.handle.style.left);
    var v = e.clientX + document.body.scrollLeft - d.trackLeft;

    if (v >= d.trackWidth - d.handleWidth + _temporary.grabPoint)
    v = d.trackWidth - d.handleWidth;

    else if (v <= _temporary.grabPoint)
    v = 0;

    else v = v - _temporary.grabPoint;

    scroll(v);
    };

    function scrollbarWheel (e) {
    if (self.disabled) return false;

    e = e ? e : event;
    var dir = 0;
    if (e.wheelDelta >= 120) dir = -1;
    if (e.wheelDelta <= -120) dir = 1; self.scrollBy(dir * 20);
    e.returnValue = false;
    };

    function startScroll (x) {
    _temporary.disty = x;
    _timer = window.setInterval(function () {
    self.scrollBy(_temporary.disty);
    }, self.scrollSpeed);
    };

    function stopScroll (e) {
    e = e?e:event;

    removeEvent(document, "mousemove", scrollbarDrag);
    removeEvent(document, "mouseup", stopScroll);

    document.onselectstart = _temporary.select;
    if (_timer) window.clearInterval(_timer);

    self.onMouseUp(_temporary.target, _temporary.target.className, e);
    };

    //public functions
    this.reset = function () {
    var d = _dimensions;
    var c = _components;
    var g = s.getDimensions();

    // _ratio = (g.theight - g.vheight) / (d.trackHeight - d.handleHeight);
    _ratio = (g.twidth - g.vwidth) / (d.trackWidth - d.handleWidth);

    c.handle.ondragstart = function (){ return false; };
    c.handle.onmousedown = function (){ return false; };
    c.handle.style.left   = "0px";
    d.x = 0;

    s.reset();
    scroll(0);

    if (g.twidth < g.vwidth) {
    this.disabled = true;
    o.className  += " Scrollbar-Disabled";
    }
    };

    this.scrollTo = function (x) {
    scroll(x / _ratio);
    };

    this.scrollBy = function (y) {
    scroll((s.getDimensions().x + x) / _ratio);
    };

    this.swapContent = function (n, w, h) {
    o = n;
    s.swapContent(o, w, h);
    initialize();
    };

    this.disable = function () {
    this.disabled = true;
    o.className  += "Scrollbar-Disabled";
    };

    this.enable = function () {
    this.disabled = false;
    o.className = o.className.replace(/Scrollbar\-Disabled/, "");
    };

    this.getContent = function () {
    return s.getContent();
    };

    this.getComponents = function () {
    return _components;
    };

    this.getDimensions = function () {
    var d = s.getDimensions();
    d.trackWidth  = _dimensions.trackWidth;
    d.handleWidth = _dimensions.handleWidth;

    return d;
    };

    initialize();
    };