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;}

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19938.html