<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="" Inherits="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///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." type="text/javascript"></script>
<title></title>
</head>
<body>
<!-- Chapter Category -->
<div class="m-catr f-cb">
<div class="tte">
Chapter Category</div>
<div >
<div >
<dl data-type="menu">
<dt>The first unit of science is systematic knowledge</dt>
<dd>
1. The same and ever-changing</dd>
<dd>
2. The Bilingual Era</dd>
<dd>
3. How people make decisions</dd>
<dd>
4. Cultivate people who work independently and think independently</dd>
</dl>
<dl data-type="menu">
<dt>The second unit of science is systematic knowledge</dt>
<dd>
1. The same and ever-changing</dd>
<dd>
2. The Bilingual Era</dd>
<dd>
3. How people make decisions</dd>
<dd>
4. Cultivate people who work independently and think independently</dd>
</dl>
<dl data-type="menu">
<dt>Unit 3 Science is systematic knowledge</dt>
<dd>
1. The same and ever-changing</dd>
<dd>
2. The Bilingual Era</dd>
<dd>
3. How people make decisions</dd>
<dd>
4. Cultivate people who work independently and think independently</dd>
</dl>
<dl data-type="menu">
<dt>The fourth unit science is systematic knowledge</dt>
<dd>
1. The same and ever-changing</dd>
<dd>
2. The Bilingual Era</dd>
<dd>
3. How people make decisions</dd>
<dd>
4. Cultivate people who work independently and think independently</dd>
</dl>
<dl data-type="menu">
<dt>Unit 5 Science is systematic knowledge</dt>
<dd>
1. The same and ever-changing</dd>
<dd>
2. The Bilingual Era</dd>
<dd>
3. How people make decisions</dd>
<dd>
4. Cultivate 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 = ('mainBox');
function bind(obj, type, handler) {
var node = typeof obj == "string" ? $(obj) : obj;
if () {
(type, handler, false);
} else if () {
('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 () {
= false;
} else {
();
}
});
//Firefox
bind(node, 'DOMMouseScroll', function (event) {
var data = getWheelData(event);
handler(data);
();
});
function getWheelData(event) {
var e = event || ;
return ? : * 40;
}
}
function addScroll() {
(this, arguments);
}
= {
init: function (mainBox, contentBox, className) {
var mainBox = (mainBox);
var contentBox = (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 scrollbar
_createScroll: function (mainBox, className) {
var _scrollBox = ('div');
_scrollBox.setAttribute("id", "scrollBox");
var _scroll = ('div');
var span = ('span');
_scrollBox.appendChild(_scroll);
_scroll.appendChild(span);
_scroll.className = className;
(_scrollBox);
return _scroll;
},
//Adjust the scrollbar
_resizeScorll: function (element, mainBox, contentBox) {
var p = ;
var conHeight = ;
var _width = ;
var _height = ;
var _scrollWidth = ;
var _left = _width - _scrollWidth;
= _scrollWidth + "px";
= _height + "px";
= _left + "px";
= "absolute";
= "#ccc";
= ( - _scrollWidth) + "px";
var _scrollHeight = parseInt(_height * (_height / conHeight));
if (_scrollHeight >= ) {
= "none";
}
= _scrollHeight + "px";
},
//Drag the scrollbar
_tragScroll: function (element, mainBox, contentBox) {
var mainHeight = ;
= function (event) {
var _this = this;
var _scrollTop = ;
var e = event || ;
var top = ;
//=scrollGo;
= scrollGo;
= function (event) {
= null;
}
function scrollGo(event) {
var e = event || ;
var _top = ;
var _t = _top - top + _scrollTop;
if (_t > (mainHeight - )) {
_t = mainHeight - ;
}
if (_t <= 0) {
_t = 0;
}
= _t + "px";
= -_t * ( / ) + "px";
_wheelData = _t;
}
}
= function () {
= "#444";
}
= function () {
= "#666";
}
},
//The mouse wheel scrolls, the scroll bar scrolls
_wheelChange: function (element, mainBox, contentBox) {
var node = typeof mainBox == "string" ? $(mainBox) : mainBox;
var flag = 0, rate = 0, wheelFlag = 0;
if (node) {
mouseWheel(node, function (data) {
wheelFlag += data;
if (_wheelData >= 0) {
flag = _wheelData;
= flag + "px";
wheelFlag = _wheelData * 12;
_wheelData = -1;
} else {
flag = wheelFlag / 12;
}
if (flag <= 0) {
flag = 0;
wheelFlag = 0;
}
if (flag >= ( - )) {
flag = ( - );
wheelFlag = ( - ) * 12;
}
= flag + "px";
= -flag * ( / ) + "px";
});
}
},
_clickScroll: function (element, mainBox, contentBox) {
var p = ;
= function (event) {
var e = event || ;
var t = || ;
var sTop = > 0 ? : ;
var top = ;
var _top = + sTop - top - / 2;
if (_top <= 0) {
_top = 0;
}
if (_top >= ( - )) {
_top = - ;
}
if (t != element) {
= _top + "px";
= -_top * ( / ) + "px";
_wheelData = _top;
}
}
}
}
new addScroll('mainBox', 'content', 'scrollDiv');
$(function () {
$("#scrollBox").hide();
$("#mainBox").mouseover(function () {
$("#scrollBox").show();
}).mouseout(function () {
$("#scrollBox").hide();
});
});
</script>
</body>
</html>