Javascript实例教程:鼠标事件的自定义滚动条

http://www.itjxue.com  2015-08-06 23:01  来源:未知  点击次数: 

面向对象——自定义滚动条,配合鼠标事件;估计错误很多,大家帮忙找找茬吧!

<!DOCTYPE HTML>
 
<html lang="en-US">
 
<head>
 
<meta charset="UTF-8">
 
<title></title>
 
<style type="text/css">
 
*{margin:0;padding:0;}
 
#div1{width:30px; height:400px; background:red;position:relative;top:30px; left:30px;}
 
#div2{width:30px; height:30px; background:blue;position:absolute}
 
#div3{width:300px; height:400px;border:1px solid blue;position:absolute;left:100px;top:30px; overflow: hidden;}
 
#div4{position:absolute;top:0;left:0;}
 
</style>
 
<script type="text/javascript">
 
window.onload=function()
 
{
 
        var obj= new zhailei("div")
 
}
 
function zhailei(id)
 
{
 
        var _this=this;
 
        this.oDiv1 =document.getElementById(id+"1");
 
        this.oDiv2 =document.getElementById(id+"2");
 
        this.oDiv3 =document.getElementById(id+"3");
 
        this.oDiv4 =document.getElementById(id+"4");
 
        this.disY=0;
 
        this.oBtn=true;
 
        this.oDiv2.style.height=this.oDiv3.offsetHeight/this.oDiv4.offsetHeight*this.oDiv1.offsetHeight+"px";
 
        this.oDiv2.onmousedown=function(ev)
 
        {
 
                _this.fnDown(ev);
 
        }
 
        if(this.oDiv1.addEventListener)
 
        {
 
                this.oDiv1.addEventListener("DOMMouseScroll",function(ev){_this.toRun(ev)},false);
 
                this.oDiv4.addEventListener("DOMMouseScroll",function(ev){_this.toRun(ev)},false);
 
        };
 
        this.oDiv1.onmousewheel=function(ev)
 
                        {
 
                                _this.toRun(ev)       
 
                        };
 
        this.oDiv4.onmousewheel=function(ev)
 
                        {
 
                                _this.toRun(ev)       
 
                        };
 
}
 
zhailei.prototype.toRun=function (ev)
 
{
 
        var ev = ev || window.event
 
        this.abc=0;
 
        if(ev.detail)
 
        {
 
                this.oBtn=ev.detail>0?true:false;
 
        }
 
        else
 
        {
 
                this.oBtn=ev.wheelDelta<0?true:false;
 
        }
 
        if(this.oBtn)
 
        {
 
                this.abc=this.oDiv2.offsetTop + 10
 
        }
 
        else
 
        {
 
                this.abc= this.oDiv2.offsetTop - 10;
 
        }
 
        if(this.abc<0)
 
        {
 
                this.abc = 0;
 
        }
 
        else if(this.abc>this.oDiv1.offsetHeight - this.oDiv2.offsetHeight)
 
        {
 
                this.abc = this.oDiv1.offsetHeight - this.oDiv2.offsetHeight;
 
        }
 
                this.oDiv2.style.top = this.abc + 'px';
 
                this.soleY = this.abc/(this.oDiv1.offsetHeight - this.oDiv2.offsetHeight);
 
                this.oDiv4.style.top = - this.soleY * (this.oDiv4.offsetHeight - this.oDiv3.offsetHeight) + 'px';
 
                if(ev.preventDefault)
 
                {
 
                        ev.preventDefault()
 
                }
 
                return false
 
}
 
zhailei.prototype.fnDown=function(ev)
 
{
 
                var _this =this
 
                var ev = ev || window.event;
 
                this.disY=ev.clientY-this.oDiv2.offsetTop
 
                if(this.oDiv2.setCapture)
 
                {
 
                        this.oDiv2.setCapture()
 
                }
 
                document.onmousemove=function(ev)
 
                {
 
                        _this.fnMove(ev)
 
                }
 
                document.onmouseup=function()
 
                {
 
                        _this.fnUp()
 
                }
 
}
 
zhailei.prototype.fnMove=function(ev)
 
{
 
        var ev = ev || window.event;
 
        this.goMove(ev)
 
}
 
zhailei.prototype.fnUp=function()
 
{
 
        document.onmousemove=null;
 
        document.onmouseup=null;
 
        if(this.oDiv2.releaseCapture)
 
        {
 
                this.oDiv2.releaseCapture()
 
        }       
 
}
 
zhailei.prototype.goMove=function (ev)
 
{
 
        this.abc=ev.clientY-this.disY;
 
        if(this.abc<0)
 
        {
 
                this.abc=0;
 
        }
 
        else if(this.abc>this.oDiv1.offsetHeight-this.oDiv2.offsetHeight)
 
        {
 
                this.abc=this.oDiv1.offsetHeight-this.oDiv2.offsetHeight;
 
        }
 
        this.oDiv2.style.top=this.abc+"px";
 
        this.scrollX=this.abc/(this.oDiv1.offsetHeight-this.oDiv2.offsetHeight);
 
        document.title=-this.scrollX*(this.oDiv4.offsetHeight-this.oDiv3.offsetHeight)+"px";
 
        this.oDiv4.style.top=-this.scrollX*(this.oDiv4.offsetHeight-this.oDiv3.offsetHeight)+"px";       
 
        if(ev.preventDefault)
 
        {
 
                ev.preventDefault()
 
        }
 
        return false
 
}
 
</script>
 
</head>
 
<body>
 
        <div id="div1">
 
                <div id="div2"></div>
 
        </div>
 
        <div id="div3">
 
                <div id="div4">
 
面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象(Object Oriented,OO)是当前计算机界关心的重点,它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发,扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。
 
</div>
 
        </div>
 
</body>
 
</html>

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章