javascript + div 做的滚动条

最新推荐文章于 2022-12-10 15:00:07 发布

原创最新推荐文章于 2022-12-10 15:00:07 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #javascript #function #class #stylesheet

Javascript 专栏收录该内容

42 篇文章

订阅专栏

此自定义滚动条类由Freewind开发，兼容IE6.0以上及Firefox浏览器，支持创建多个滚动条。通过JavaScript实现，适用于不同大小的内容区域。

// JavaScript Document

/**//************************************************************

名称: ScrollBar滚动条类

作者: freewind

版本: v1.0

时间: 2008-02-20

修改: 2008-02-21

Email: freewind22@163.com

说明: 兼容IE6.0以上和 Firefox ,可同时创建多个滚动条

*************************************************************/

function $(o)...{ return document.getElementById(o); }

function CScrollBar(oScrollBar, oLeft, oContent, oRight, oUp, oCenter, oButton, oDown)...{

this.nSpeed = 9;

this.nWidth = 10;

this.nBtnHeight = 13;

this.nSliderHeight = 0;

this.nTopMax = 0;

this.sColor = "#FFFFFF";

this.nViewHeight = 0;

this.nTrueHeight = 0;

this.bMouseDown = false;

this.nX = 0;

this.nY = 0;

this._ScrollBar = $(oScrollBar);

this._Left = $(oLeft);

this._Content = $(oContent);

this._Right = $(oRight);

this._Up = $(oUp);

this._Button = $(oButton);

this._Center = $(oCenter);

this._Down = $(oDown);

//初始化

this.Init();

}

CScrollBar.prototype = ...{

Init: function()...{

//设置高度

this.nViewHeight = parseInt(this._ScrollBar.style.height);

this.nTrueHeight = parseInt(this._Content.offsetHeight);

//检测是否需要滚动条

if(this.nViewHeight >= this.nTrueHeight)

...{

this._Right.style.display = "none";;

return;

}

this._Right.style.display = "inline";

//设置位置

this._Right.style.width = this.nWidth + "px";

this._Left.style.width = parseInt(this._ScrollBar.style.width) - this.nWidth + "px";

this._Center.style.height = parseInt(this._ScrollBar.style.height) - this.nBtnHeight*2 + "px";

this._Button.style.top = "0px";

this._Content.style.top = "0px";

//显示上,下按钮

this.DrawButton();

//设置最大移动距离

this.nTopMax = this.nSliderHeight - parseInt(this._Button.style.height);

//设置速度

this.nSpeed = (this.nTrueHeight - this.nViewHeight) / (this.nTopMax);

//alert(this.nTopMax + "-" + this._Button.style.height + "=" + this.nSliderHeight);

//alert(this.nSpeed);

//设置事件

var objThis = this;

this._Button.onmousedown = function(oEvent)...{

objThis.MouseDown(oEvent);

};

this._Button.onmouseup = function(oEvent)...{

objThis.MouseUp(oEvent);

};

this._Button.onmousemove = function(oEvent)...{

objThis.MouseMove(oEvent);

};

this._Up.onmousedown = function()...{

//alert(objThis.nSliderHeight);

objThis.Move( parseInt(objThis.nSliderHeight / 10) );

};

this._Down.onmousedown = function()...{

objThis.Move(parseInt(objThis.nSliderHeight / -10));

}

DrawButton : function()...{

//Up

var str = "";

for(var i=2; i<=6; i+=2)...{

str += "<table cellpadding='0' cellspacing='0' align='center' ><tr><td style='height:1px; width:" + i + "px; background:" + this.sColor + "'></td></tr></table>";

}

this._Up.innerHTML = str;

//Down

str = "";

for(var i=6; i>=2; i-=2)...{

str += "<table cellpadding='0' cellspacing='0' align='center' ><tr><td style='height:1px; width:" + i + "px; background:" + this.sColor + "'></td></tr></table>";

}

this._Down.innerHTML = str;

//Button

this.nSliderHeight = parseInt(this._Center.style.height);

this._Button.style.height = parseInt((this.nViewHeight / this.nTrueHeight) * this.nSliderHeight + 0.5) + "px";

this._Button.style.width = this.nWidth - 4 + "px";

str = "<table style='cursor:pointer;' cellpadding='0' cellspacing='0' align='center' ><tr><td style='height:" + this._Button.style.height + "; width:" + this._Button.style.width + "; background:" + this.sColor + "'></td></tr></table>";

this._Button.innerHTML = str;

MouseDown : function(oEvent)...{

if(!this.bMouseDown)...{

//this._ScrollBar.onselectstart = "return false;"

this.bMouseDown = true;

if(document.all)

...{

this.nY = event.clientY;

this._Button.setCapture();

}else...{

this.nY = oEvent.pageY;

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE);

}

MouseUp : function(oEvent)...{

if(this.bMouseDown)

...{

this.bMouseDown = false;

if(document.all)...{

this._Button.releaseCapture();

}else...{

window.releaseEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE);

}

MouseMove : function(oEvent)...{

var newY = 0, nSize, nTop, str;

if(this.bMouseDown)

...{

if(document.all)...{

newY = event.clientY;

}else...{

newY = oEvent.pageY;

}

nSize = this.nY - newY;

this.Move(nSize);

this.nY = newY;

}

Move : function(nSize)...{

//滚动条

var nTop = parseInt(this._Button.style.top) - nSize;

if(nTop < 0)...{

this._Button.style.top = "0px";

this._Content.style.top = "0px";

return;

}

if(nTop >= this.nTopMax)...{

nSize += (nTop - this.nTopMax);

nTop = this.nTopMax;

}

this._Button.style.top = nTop + "px";

//内容

//nTop = parseInt(this._Content.style.top) + parseInt(nSize * this.nSpeed);

nTop = -parseInt(parseInt(this._Button.style.top) * this.nSpeed + 0.5);

if(nTop > 0) nTop = 0;

this._Content.style.top = nTop + "px";

setSize : function(wid, hei)...{

this._ScrollBar.style.width = wid + "px";

this._ScrollBar.style.height = hei + "px";

this.Init();

}

/**//*********** CSS 文件 ******************/

/**//* CSS Document */

.scrollBar{...}{color:#FFFFFF; border:0px solid #DEDEDE;}

.sbLeft{...}{ overflow:hidden; height:100%; width:95%; float:left; position:relative; z-index:10;}

.sbContent{...}{position:relative; top:0px; z-index:1;}

.sbRight{...}{overflow:hidden; width:5%; float:right;}

.sbUp{...}{width:auto; text-align:center; padding-top:5px; padding-bottom:5px; cursor:pointer;}

.sbDown{...}{width:auto; text-align:center; padding-top:5px; padding-bottom:5px; cursor:pointer;}

.sbCenter{...}{width:auto; padding-left:2px; position:relative; z-index:9; }

.sbButton{...}{width:auto; top:0px; cursor:pointer; position:relative; z-index:1; }

/*************　测试　文件 *******************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Freewind Scroll Bar</title>

function SetScrollBar()...{

var sb = new CScrollBar("scrollBar", "sbLeft", "sbContent", "sbRight", "sbUp", "sbCenter", "sbButton", "sbDown");

//sb.setSize(400, 300);

//var sb2 = new CScrollBar("scrollBar2", "sbLeft2", "sbContent2", "sbRight2", "sbUp2", "sbCenter2", "sbButton2", "sbDown2");

}

</script>

</head>

<tr>

</tr>

<tr>

<P>Established in 1999, Shenzhen Golden Grain Park Industrial Development Co., Ltd. is a diversified food enterprise integrating food research, development, allocation and distribution. After 5 years of hard efforts ever since the foundation of our company, now the gross assets of our company reaches RMB60,000,000, the production workshop covers about 10000 square meters and the whole staff of our company amounts to about 600, among whom there are 80 technical professionals and over 440 business operators and production workers. <BR>Along with the market changes and development, our company has developed into a industrial enterprise with several full-capital sub-companies and institutions attached to it, which include as follows: </P>

<P>1、Golden Ear Nutrition Food Preparation Center<BR>2、Golden Ear Professional Meal Trusteeship Institution<BR>3、Golden Ear Breakfast Project Investment and Development Co., Ltd.<BR>4、Golden Grain Park Exquisite Specialty Shop<BR>5、Golden Baby Food Chain Institution</P>

<P>Sticking to the development principle of people paramount, Golden Grain Park values </P>

</div>