熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js循環改變div顏色具體方法

2013-11-15 11:56:48  來源: JSP教程 
用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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.