div模拟滚动条效果示例代码

代码如下:

<%@ 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;
}
/* 章节类别 */
.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>
<!-- 章节类别 -->
<div class="m-catr f-cb">
<div class="tte">
章节类别</div>
<div id="mainBox">
<div id="content">
<dl data-type="menu">
<dt>第一单元科学是系统化了的知识</dt>
<dd>
1、千篇一律与千变万化</dd>
<dd>
2、双语言时代</dd>
<dd>
3、人们如何做出决策</dd>
<dd>
4、培养独立工作和独立思考的人</dd>
</dl>
<dl data-type="menu">
<dt>第二单元科学是系统化了的知识</dt>
<dd>
1、千篇一律与千变万化</dd>
<dd>
2、双语言时代</dd>
<dd>
3、人们如何做出决策</dd>
<dd>
4、培养独立工作和独立思考的人</dd>
</dl>
<dl data-type="menu">
<dt>第三单元科学是系统化了的知识</dt>
<dd>
1、千篇一律与千变万化</dd>
<dd>
2、双语言时代</dd>
<dd>
3、人们如何做出决策</dd>
<dd>
4、培养独立工作和独立思考的人</dd>
</dl>
<dl data-type="menu">
<dt>第四单元科学是系统化了的知识</dt>
<dd>
1、千篇一律与千变万化</dd>
<dd>
2、双语言时代</dd>
<dd>
3、人们如何做出决策</dd>
<dd>
4、培养独立工作和独立思考的人</dd>
</dl>
<dl data-type="menu">
<dt>第五单元科学是系统化了的知识</dt>
<dd>
1、千篇一律与千变万化</dd>
<dd>
2、双语言时代</dd>
<dd>
3、人们如何做出决策</dd>
<dd>
4、培养独立工作和独立思考的人</dd>
</dl>
</div>
</div>
</div>
<!-- /章节类别 -->
<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();
}

});
//火狐
bind(node, 'DOMMouseScroll', 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);
},
//创建滚动条
_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;
},
//调整滚动条
_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";
},
//拖动滚动条
_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";
}
},
//鼠标滚轮滚动，滚动条滚动
_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;
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.target || e.srcElement;
var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.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>

赞 (0)

相关推荐

  • div模拟滚动条效果示例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

  • div模拟选择框示例代码

    div模拟选择框示例代码

    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.

  • jQuery 动态粒子效果示例代码

    1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMetho

  • vue中实现拖动调整左右两侧div的宽度的示例代码

    写在最前 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样 这是我最终的实现效果 还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,<vue 拖动调整左右两侧div的宽度>.<vuejs中拖动改变元素宽度实现宽度自适应大小>,而我只是针对于他们提供的代码,加了亿点点自己所需要的细节. 实现原理 如上图所示,我们需要将要实现此功能的页面划分为三个部分,左部.调整区.右部,分别对应css样式为le

  • Python 通过爬虫实现GitHub网页的模拟登录的示例代码

    1. 实例描述 通过爬虫获取网页的信息时,有时需要登录网页后才可以获取网页中的可用数据,例如获取 GitHub 网页中的注册号码时,就需要先登录账号才能在登录后的页面中看到该信息,如下图所示.那么该如何实现模拟登录的功能呢?本文实现将通过爬虫实现 GitHub 网页的模拟登录. 2. 代码实现 在实现 GitHub 网页的模拟登录时,首先需要查看提交登录请求时都要哪些请求参数,然后获取登录请求的所有参数,再发送登录请求.如果登录成功的情况下获取页面中的注册号码信息即可.具体步骤如下: (1) 点

  • Vue中实现过渡动画效果示例代码

    Vue中实现过渡动画效果示例代码

    目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R

  • JS实现点击复选框变更DIV显示状态的示例代码

    首先是页面上: <div class="row cl"> <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>是否存在促销活动:</label> <div class="formControls col-xs-8 col-s

  • Java模拟UDP通信示例代码

    Java基础:模拟UDP通信 1.一次发送,一次接收 1.1.发送方 // 发送端,不需要连接服务器 public class UdpClientDemo {     public static void main(String[] args) throws Exception {         // 1. 发送数据包需要一个Socket         DatagramSocket socket = new DatagramSocket();         // 1.2 建立一个包    

  • Flutter 实现酷炫的3D效果示例代码

    此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo'), ), body: Container( alignm

  • Android开发TextvView实现镂空字体效果示例代码

    记录一下... 自定义TextView public class HollowTextView extends AppCompatTextView { private Paint mTextPaint, mBackgroundPaint; private Bitmap mBackgroundBitmap,mTextBitmap; private Canvas mBackgroundCanvas,mTextCanvas; private RectF mBackgroundRect; private

随机推荐