JavaScript实现自定义网页滚动条：
<!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>
<title>自定义滚动条</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
.container
{
width: 510px;
margin: 50px auto;
line-height: 50px;
}
#Vertical
{
width: 100%;
height: 40px;
overflow: hidden;
border: 1px solid #cccccc;
border-bottom: none;
}
#Horizontal
{
width: 470px;
height: 310px;
overflow: hidden;
float: right;
border: 1px solid #cccccc;
border-right: none;
}
#ver_roll
{
width: 100%;
background: url(../images/bg2.png) repeat-x;
}
#hor_roll
{
width: 30px;
float: right;
height: 310px;
text-align: center;
background: url(../images/bg1.png) repeat-y;
}
.ver_drag, .hor_drag
{
position: relative;
cursor: pointer;
z-index: 100;
}
</style>
<script type="text/javascript">
var dragobject = {
z: 0, x: 0, y: 0, offsetx: null, offsety: null, targetobj: null, dragapproved: 0,
initialize: function() {
document.onmousedown = this.drag
document.onmouseup = function() { this.dragapproved = 0 }
},
drag: function(e) {
var evtobj = window.event ? window.event : e
this.targetobj = window.event ? event.srcElement : e.target
if (this.targetobj.className == "ver_drag") {
this.dragapproved = 1
if (isNaN(parseInt(this.targetobj.style.left))) { this.targetobj.style.left = 0 }
if (isNaN(parseInt(this.targetobj.style.top))) { this.targetobj.style.top = 0 }
this.offsetx = parseInt(this.targetobj.style.left)
this.offsety = parseInt(this.targetobj.style.top)
this.x = evtobj.clientX
this.y = evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove = dragobject.moveit
}
if (this.targetobj.className == "hor_drag") {
this.dragapproved = 2
if (isNaN(parseInt(this.targetobj.style.left))) { this.targetobj.style.left = 0 }
if (isNaN(parseInt(this.targetobj.style.top))) { this.targetobj.style.top = 0 }
this.offsetx = parseInt(this.targetobj.style.left)
this.offsety = parseInt(this.targetobj.style.top)
this.x = evtobj.clientX
this.y = evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove = dragobject.moveit
}
},
moveit: function(e) {
var evtobj = window.event ? window.event : e
if (this.dragapproved == 1) {
if (this.offsetx + evtobj.clientX - this.x >= 0 && this.offsetx + evtobj.clientX - this.x <= 500) {
var obj = document.getElementById("Vertical");
this.targetobj.style.left = this.offsetx + evtobj.clientX - this.x + "px";
obj.scrollLeft = obj.scrollWidth * (this.offsetx + evtobj.clientX - this.x) / 500;
}
return false
}
if (this.dragapproved == 2) {
if (this.offsety + evtobj.clientY - this.y >= 0 && this.offsety + evtobj.clientY - this.y <= 300) {
var obj = document.getElementById("Horizontal");
this.targetobj.style.top = this.offsety + evtobj.clientY - this.y + "px";
obj.scrollTop = obj.scrollHeight * (this.offsety + evtobj.clientY - this.y) / 300;
}
return false
}
}
}
dragobject.initialize()
</script>
</head>
<body>
<div class="container">
<div id="Vertical">
<table cellpadding="0" cellspacing="0" width="1000px">
<tr>
<td>
像风一样拂过，穿过几条小巷，吹落几片黄叶；像云一样飘过，掠过几座高楼，洒下几滴细雨。
</td>
</tr>
</table>
</div>
<div id="ver_roll">
<img src="../images/roll.png" class="ver_drag" />
</div>
</div>
<div class="container">
<div id="hor_roll">
<img src="../images/roll.png" class="hor_drag" />
</div>
<div id="Horizontal">
一、<br />
二、<br />
三、<br />
四、<br />
五、<br />
六、<br />
七、<br />
八、<br />
九、<br />
十、<br />
</div>
</div>
<div class="container">
</div>
</body>
</html>
扫一扫
4873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
