最近空闲时间比较多,就决定抽点时间好好的研究一下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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.scrollbar {
position: absolute;
left: 10%;
width: 80%;
height: 16px;
z-index: 1000;
}
.scrollbar .track {
position: absolute;
left: 1%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
}
.scrollbar .arrow-left {
position: absolute;
}
.scrollbar .arrow-right{
position: absolute;
right: 0px;
}
.scrollbar .bar{
position: absolute;
height: 16px;
left: 25px;
}
</style>
<script type="text/javascript">
var info=function(){
function getElementsByClass (object, tag, className) {//根据css类得到对象
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++)
if (o[i].className == className) ret.push(o[i]);
if (ret.length == 1) ret = ret[0];
return ret;
}
function addEvent (o, e, f) {// 为对象添加对象
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function scrollbar(divob)
{
this.obj1= document.getElementById(divob);
this.arleft=getElementsByClass(this.obj1,'img','arrow-left');
this.arright=getElementsByClass(this.obj1,'img','arrow-right');
this.bar=getElementsByClass(this.obj1,'img','bar');
this.bar.parent=this;
this.oc = document.getElementById(divob);
this.ws = this.bar.offsetWidth;
this.bw = this.bar.width;
this.alw = this.arleft.width - 5;this.alleft=this.arleft.offsetLeft;
this.arw = this.arright.width - 5;this.arleft=this.arright.offsetLeft;
/* ==== add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
this.parent.scroll(-e.detail);alert("test");
}, false);
else this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
}
/* ==== 拖动滚动条 ==== */
this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;
/* ---- 移动滚动条 ---- */
this.onmousemove = function (e) {
if (!e) e = window.event;
if(e.screenX - scl<self.alleft+self.alw)
this.style.left=self.alleft+self.alw;
else if(e.screenX - scl>self.arleft-self.ws+5)
this.style.left =self.arleft-self.ws+5;
else
this.style.left =e.screenX - scl;
return false;
}
/* ---- 释放滚动条 ---- */
this.onmouseup = function (e) {
this.onmousemove = null;
return false;
}
return false;
}
}
scrollbar.prototype={}
return{
create:function()
{
var load=function(){
var obj=new scrollbar('show')};
/* ---- 窗体的onload事件 ---- */
addEvent(window, 'load', function () { load(); });
}
}}();
info.create();
</script>
</head>
<body bgcolor="#030000">
<div id="show" class="scrollbar">
<img class="track" src="sb.gif" alt="">
<img class="arrow-left" src="sl.gif" alt="">
<img class="arrow-right" src="sr.gif" alt="">
<img class="bar" src="sc.gif" alt="">
</div>
</body>
</html>
效果图:
如果有感兴趣的可到我的相册中下载图片