Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "html. aspx. cs" Inherits = "WebApplication1.html" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Style type = "text/css">
*
{
Margin: 0;
Padding: 0;
}
{
Height: 1000px;
}
# MainBox
{
Width: 250px;
Height: 500px;
Border: 1px # bbb solid;
Position: relative;
Overflow: hidden;
Margin: 50px auto;
}
# Content
{
Height: 1000px;
Position: absolute;
Left: 0;
Top: 0;
}
. ScrollDiv
{
Width: 6px;
Position: absolute;
Top: 0;
Background: #666;
Border-radius: 10px;
}
/* Chapter category */
. M-catr {padding: 15px 0 10px 12px; * padding: 15px 0 10px 14px ;}
. M-catr. tte {float: left; line-height: 35px; text-align: left; font-size: 14px; font-weight: bold; color: # 5b98db ;}
# Content dl {width: 225px; float: left; margin-top: 10px ;}
# Content dl dt,. m-catr dl dd {float: left; width: 100%; line-height: 25px; text-align: left; color: #444 ;}
# Content dl dt {font-weight: bold ;}
# Content dl dd {margin-left: 12px ;}
</Style>
<Script src = "Scripts/jquery-1.7.2.min.js" type = "text/javascript"> </script>
<Title> </title>
</Head>
<Body>
<! -- Chapter category -->
<Div class = "m-catr f-cb">
<Div class = "tte">
Chapter Category </div>
<Div id = "mainBox">
<Div id = "content">
<Dl data-type = "menu">
<Dt> the first unit of science is systematic knowledge </dt>
<Dd>
1. consistent and ever-changing </dd>
<Dd>
2. Dual-language era </dd>
<Dd>
3. How do people make decisions </dd>
<Dd>
4. Train people who work independently and think independently </dd>
</Dl>
<Dl data-type = "menu">
<Dt> Unit 2 science is systematic knowledge </dt>
<Dd>
1. consistent and ever-changing </dd>
<Dd>
2. Dual-language era </dd>
<Dd>
3. How do people make decisions </dd>
<Dd>
4. Train people who work independently and think independently </dd>
</Dl>
<Dl data-type = "menu">
<Dt> Unit 3 science is systematic knowledge </dt>
<Dd>
1. consistent and ever-changing </dd>
<Dd>
2. Dual-language era </dd>
<Dd>
3. How do people make decisions </dd>
<Dd>
4. Train people who work independently and think independently </dd>
</Dl>
<Dl data-type = "menu">
<Dt> Unit 4 science is systematic knowledge </dt>
<Dd>
1. consistent and ever-changing </dd>
<Dd>
2. Dual-language era </dd>
<Dd>
3. How do people make decisions </dd>
<Dd>
4. Train people who work independently and think independently </dd>
</Dl>
<Dl data-type = "menu">
<Dt> Unit 5 science is systematic knowledge </dt>
<Dd>
1. consistent and ever-changing </dd>
<Dd>
2. Dual-language era </dd>
<Dd>
3. How do people make decisions </dd>
<Dd>
4. Train people who work independently and think independently </dd>
</Dl>
</Div>
</Div>
</Div>
<! --/Chapter category -->
<Script type = "text/javascript">
Var doc = document;
Var _ wheelData =-1;
Var mainBox = doc. getElementById ('mainbox ');
Function bind (obj, type, handler ){
Var node = typeof obj = "string "? $ (Obj): obj;
If (node. addEventListener ){
Node. addEventListener (type, handler, false );
} Else if (node. attachEvent ){
Node. attachEvent ('on' + type, handler );
} Else {
Node ['on' + type] = handler;
}
}
Function mouseWheel (obj, handler ){
Var node = typeof obj = "string "? $ (Obj): obj;
Bind (node, 'mousewheel ', function (event ){
Var data =-getWheelData (event );
Handler (data );
If (document. all ){
Window. event. returnValue = false;
} Else {
Event. preventDefault ();
}
});
// Firefox
Bind (node, 'domainscroll ', function (event ){
Var data = getWheelData (event );
Handler (data );
Event. preventDefault ();
});
Function getWheelData (event ){
Var e = event | window. event;
Return e. wheelDelta? E. wheelDelta: e. detail * 40;
}
}
Function addScroll (){
This. init. apply (this, arguments );
}
AddScroll. prototype = {
Init: function (mainBox, contentBox, className ){
Var mainBox = doc. getElementById (mainBox );
Var contentBox = doc. getElementById (contentBox );
Var scrollDiv = this. _ createScroll (mainBox, className );
This. _ resizeScorll (scrollDiv, mainBox, contentBox );
This. _ tragScroll (scrollDiv, mainBox, contentBox );
This. _ wheelChange (scrollDiv, mainBox, contentBox );
This. _ clickScroll (scrollDiv, mainBox, contentBox );
},
// Create a scroll bar
_ CreateScroll: function (mainBox, className ){
Var _ scrollBox = doc. createElement ('div ');
_ ScrollBox. setAttribute ("id", "scrollBox ");
Var _ scroll = doc. createElement ('div ');
Var span = doc. createElement ('span ');
_ ScrollBox. appendChild (_ scroll );
_ Scroll. appendChild (span );
_ Scroll. className = className;
MainBox. appendChild (_ scrollBox );
Return _ scroll;
},
// Adjust the scroll bar
_ ResizeScorll: function (element, mainBox, contentBox ){
Var p = element. parentNode;
Var conHeight = contentBox. offsetHeight;
Var _ width = mainBox. clientWidth;
Var _ height = mainBox. clientHeight;
Var _ scrollWidth = element. offsetWidth;
Var _ left = _ width-_ scrollWidth;
P. style. width = _ scrollWidth + "px ";
P. style. height = _ height + "px ";
P. style. left = _ left + "px ";
P. style. position = "absolute ";
P. style. background = "# ccc ";
ContentBox. style. width = (mainBox. offsetWidth-_ scrollWidth) + "px ";
Var _ scrollHeight = parseInt (_ height * (_ height/conHeight ));
If (_ scrollHeight> = mainBox. clientHeight ){
Element. parentNode. style. display = "none ";
}
Element. style. height = _ scrollHeight + "px ";
},
// Drag the scroll bar
_ TragScroll: function (element, mainBox, contentBox ){
Var mainHeight = mainBox. clientHeight;
Element. onmousedown = function (event ){
Var _ this = this;
Var _ scrollTop = element. offsetTop;
Var e = event | window. event;
Var top = e. clientY;
// This. onmousemove = scrollGo;
Document. onmousemove = scrollGo;
Document. onmouseup = function (event ){
This. onmousemove = null;
}
Function scrollGo (event ){
Var e = event | window. event;
Var _ top = e. clientY;
Var _ t = _ top-top + _ scrollTop;
If (_ t> (mainHeight-element. offsetHeight )){
_ T = mainHeight-element. offsetHeight;
}
If (_ t <= 0 ){
_ T = 0;
}
Element. style. top = _ t + "px ";
ContentBox. style. top =-_ t * (contentBox. offsetHeight/mainBox. offsetHeight) + "px ";
_ WheelData = _ t;
}
}
Element. onmouseover = function (){
This. style. background = "#444 ";
}
Element. onmouseout = function (){
This. style. background = "#666 ";
}
},
// Scroll the scroll wheel and scroll bar
_ WheelChange: function (element, mainBox, contentBox ){
Var node = typeof mainBox = "string "? $ (MainBox): mainBox;
Var flag = 0, rate = 0, and wheelFlag = 0;
If (node ){
MouseWheel (node, function (data ){
WheelFlag + = data;
If (_ wheelData> = 0 ){
Flag = _ wheelData;
Element. style. top = flag + "px ";
WheelFlag = _ wheelData * 12;
_ WheelData =-1;
} Else {
Flag = wheelFlag/12;
}
If (flag <= 0 ){
Flag = 0;
WheelFlag = 0;
}
If (flag> = (mainBox. offsetHeight-element. offsetHeight )){
Flag = (mainBox. clientHeight-element. offsetHeight );
WheelFlag = (mainBox. clientHeight-element. offsetHeight) * 12;
}
Element. style. top = flag + "px ";
ContentBox. style. top =-flag * (contentBox. offsetHeight/mainBox. offsetHeight) + "px ";
});
}
},
_ ClickScroll: function (element, mainBox, contentBox ){
Var p = element. parentNode;
P. onclick = function (event ){
Var e = event | window. event;
Var t = e.tar get | e. srcElement;
Var sTop = document.doc umentElement. scrollTop> 0? Document.doc umentElement. scrollTop: document. body. scrollTop;
Var top = mainBox. offsetTop;
Var _ top = e. clientY + sTop-top-element. offsetHeight/2;
If (_ top <= 0 ){
_ Top = 0;
}
If (_ top> = (mainBox. clientHeight-element. offsetHeight )){
_ Top = mainBox. clientHeight-element. offsetHeight;
}
If (t! = Element ){
Element. style. top = _ top + "px ";
ContentBox. style. top =-_ top * (contentBox. offsetHeight/mainBox. offsetHeight) + "px ";
_ WheelData = _ top;
}
}
}
}
New addScroll ('mainbox', 'content', 'scrolldiv ');
$ (Function (){
$ ("# ScrollBox"). hide ();
$ ("# MainBox"). mouseover (function (){
$ ("# ScrollBox"). show ();
}). Mouseout (function (){
$ ("# ScrollBox"). hide ();
});
});
</Script>
</Body>
</Html>