一个javascript实现的滚动条

来源：互联网发布：绘画软件知乎编辑：程序博客网时间：2024/05/06 07:40

最近空闲时间比较多，就决定抽点时间好好的研究一下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>

效果图：

如果有感兴趣的可到我的相册中下载图片