js循环改变div颜色具体方法

用DIV和DIV自身的滚动条相互控制内容的滚动DIV自身的滚动条样式可以用DIV层覆盖重写滚动条样式

JQuery计算滚动条长度和位置代码如下

javascript

复制代码 代码如下:
<script type="text/javascript">
var scrMinHeight = ; //滚动条最小高度
var scrMaxHeight = ; //滚动条最大高度
var scrDefualtTop = ; //滚动条默认位置
var scrHeight = ;
//初始化滚动条
function InitScroll() {
scrMaxHeight = $("#mainScrollContent")height(); //文本框高度
scrHeight = documentgetElementById("mainScrollContent")scrollHeight; //滚动文本高度
scrHeight = parseInt((scrMaxHeight / scrHeight) * scrMaxHeight);
if (scrHeight <= scrMinHeight) { scrHeight = scrMinHeight; }
if (scrHeight >= scrMaxHeight) { $("#scrollContent")hide(); }
else {
$("#scrollContent")show();
$("#scrollContent tiao_mid")css("height" (scrHeight ) + "px");
}
}

$(document)ready(function () {
$("bod")height(($(document)height() ) + "px");
$("#mainScrollContent")height(($(document)height() ) + "px");
scrMaxHeight = ($(document)height() ); //滚动条最大高度
$("#scrollBody")height(($(document)height() ) + "px");
$("#scrollBodyBack")height(($(document)height() ) + "px");

InitScroll();
$("#mainScrollContent")scroll(function () {
ChangeScroll();
});
var y = ;
$("#scrollContent")mousedown(function (event) {
var scrContentTop = $("#scrollContent")css("top");
y = eventclientY parseInt(scrContentTopreplace("px" ""));
$("#scrollContent")mousemove(function (event) {
if ((eventclientY y) < scrDefualtTop) {
$("#scrollContent")css("top" scrDefualtTop + "px");
}
else if ((eventclientY y) > (scrDefualtTop + scrMaxHeight scrHeight)) {
$("#scrollContent")css("top" (scrDefualtTop + scrMaxHeight scrHeight) + "px");
}
else {
$("#scrollContent")css("top" (eventclientY y) + "px");
}
ChangeScrollContent();
});
})mouseup(function () {
$("#scrollContent")unbind("mousemove");
})mouseout(function () {
$("#scrollContent")unbind("mousemove");
});
});

//改变滚动内容位置
function ChangeScrollContent() {
var scrTop = $("#scrollContent")css("top");
var st = parseInt(scrTopreplace("px" ""));
st = ((st scrDefualtTop) * documentgetElementById("mainScrollContent")scrollHeight) / scrMaxHeight
$("#mainScrollContent")scrollTop(st); //滚动的高度
}

//改变滚动条位置
function ChangeScroll() {
var scrTop = $("#mainScrollContent")scrollTop(); //滚动的高度
scrTop = (scrTop * scrMaxHeight) / documentgetElementById("mainScrollContent")scrollHeight + scrDefualtTop;
$("#scrollContent")css("top" scrTop + "px");
}
</script>

滚动区域内容DIV
html

复制代码 代码如下:
<div class="jtc_neir" id="Div" style="height: px;">
营业总收入:亿元(同比增长%)
<br />
<a href="bankaspx">dddd</a>净利润:亿元(同比增长%)
<br />
每股收益:元
<br />
净资产收益率:%
<br />
毛利率:%(同比增长%)
<br />
总资产:亿元(同比增长%)<br />
as大苏打撒旦撒
<br />
阿斯蒂芬多个地方营业总收入:亿元(同比增长%)
<br />
净利润:亿元(同比增长%)
<br />
每股收益:元
<br />
净资产收益率:%
<br />
毛利率:%(同比增长%)
<br />
总资产:亿元(同比增长%)<br />
as大苏打撒旦撒
<br />
阿斯蒂芬多个地方营业总收入:亿元(同比增长%)
<br />
净利润:亿元(同比增长%)
<br />
每股收益:元
<br />
净资产收益率:%
<br />
毛利率:%(同比增长%)
<br />
总资产:亿元(同比增长%)<br />
as大苏打撒旦撒
<br />
阿斯蒂芬多个地方营业总收入:亿元(同比增长%)
<br />
净利润:亿元(同比增长%)
<br />
每股收益:元
<br />
净资产收益率:%
<br />
毛利率:%(同比增长%)
<br />
总资产:亿元(同比增长%)<br />
as大苏打撒旦撒
<br />
阿斯蒂芬多个地方营业总收入:亿元(同比增长%)
<br />
净利润:亿元(同比增长%)
<br />
每股收益:元
<br />
净资产收益率:%
<br />
毛利率:%(同比增长%)
<br />
总资产:亿元(同比增长%)<br />
as大苏打撒旦撒
<br />
阿斯蒂芬多个地方</div>
<div class="jtc_tiao" style="backgroundcolor: rgb(); zindex: ;" id="Div">
</div>
<div class="jtc_tiao" style="backgroundcolor: rgb(); zindex: ; width: px;"
id="Div">
</div>
<div class="jtc_tiao" id="Div">
<div class="tiao_up">
</div>
<div class="tiao_mid">
</div>
<div class="tiao_bottom">
</div>
</div>

主要样式
css

复制代码 代码如下:

jtc_neir{marginleft:px; marginright:px; color:#; fontsize:px; background:none; lineheight:px; overflowy:scroll;overflowx:hidden;
scrollbardlightcolor:rgb();
scrollbararrowcolor:rgb();
scrollbarbasecolor:rgb();
scrollbardarkshadowcolor:rgb();
scrollbarfacecolor:rgb();
scrollbarhighlightcolor:rgb();
scrollbarshadowcolor:rgb();}

jtc_tiao{width:px; position:absolute; top:px; right:px; zindex:;}
tiao_up{width:px; height:px; background:url(/images/scrollbarjpg) left top norepeat; lineheight:px; overflow:hidden;}
tiao_mid{width:px; background:url(/images/scrollbarjpg) px center repeaty; lineheight:px; overflow:hidden;}
tiao_bottom{width:px; height:px; background:url(/images/scrollbarjpg) px bottom norepeat;fontsize:; lineheight:px; overflow:hidden;}