自制滚动条的小例子,js实现拖拽效果
分类:关于美高梅

        // prevent(event);
    }

Js可拖拽放大的层拖动特效实现方法,js拖拽

本文实例讲述了Js可拖拽放大的层拖动特效实现方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js实现层拖动效果,还可以拖拽放大</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
 width:100%;
 height:100%;
 background:#f00;
 filter:alpha(opacity:0);
 opacity:0;
 z-index:9999;
 position:absolute;
 top:0;
 left:0;
 display:none;
}
#div2{
 width:200px;
 height:200px;
 position:relative;
 background:#EEEEEE;
 border:1px solid #f00;
}
#div1{
 width:15px;
 height:15px;
 background:#99CC00;
 position:absolute;
 right:0px;
 bottom:0px;
 cursor:nw-resize;
 overflow:hidden;
 font-size:12px;
 text-align:center;
 line-height:15px;
 color:#FFFFFF;
 float:right;
 z-index:3;
}
#right{
 width:15px;
 height:100%;
 background:#f00;
 float:right;
 position:absolute;
 right:0;
 top:0;
 cursor:e-resize;
 overflow:hidden;
 filter:alpha(opacity:0);
 opacity:0;
 z-index:1;
}
#bottom{
 width:100%;
 height:15px;
 background:#f00;
 position:absolute;
 left:0;
 bottom:0;
 cursor:n-resize;
 overflow:hidden;
 filter:alpha(opacity:0);
 opacity:0;
 z-index:1;
}
#div2 p{
 padding:10px;
 line-height:24px;
 font-size:13px;
 text-indent:24px;
 color:#996600;
}
#div2 h2{
 width:100%;
 height:25px;
 line-height:25px;
 font-size:14px;
 background:#CC9900;
 color:#FFFFFF;
 text-indent:15px;
 cursor:move;
 overflow:hidden;
}
</style>
<script type="text/javascript">
window.onload=function()
{
 var oDiv=document.getElementById("div1");
 var oDiv2=document.getElementById("div2");
 var zhezhao=document.getElementById("zhezhao");
 var h2=oDiv2.getElementsByTagName("h2")[0];
 var right=document.getElementById("right");
 var bottom=document.getElementById("bottom");
 var mouseStart={};
 var divStart={};
 var rightStart={};
 var bottomStart={};
 //往右拽
 right.onmousedown=function(ev)
 {
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  rightStart.x=right.offsetLeft;
  if(right.setCapture)
  {
   right.onmousemove=doDrag1;
   right.onmouseup=stopDrag1;
   right.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag1,true);
   document.addEventListener("mouseup",stopDrag1,true);
  }
 };
 function doDrag1(ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+rightStart.x;
  var w=l+oDiv.offsetWidth;
 
  if(w<oDiv.offsetWidth)
  {
   w=oDiv.offsetWidth;
  }
  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
  {
   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
  }
  oDiv2.style.width=w+"px";
 };
 function stopDrag1()
 {
  if(right.releaseCapture)
  {
   right.onmousemove=null;
   right.onmouseup=null;
   right.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag1,true);
   document.removeEventListener("mouseup",stopDrag1,true);
  }
 };
 //往下拽
 bottom.onmousedown=function(ev)
 {
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  bottomStart.y=bottom.offsetTop;
  if(bottom.setCapture)
  {
   bottom.onmousemove=doDrag2;
   bottom.onmouseup=stopDrag2;
   bottom.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag2,true);
   document.addEventListener("mouseup",stopDrag2,true);
  }
 };
 function doDrag2(ev)
 {
  var oEvent=ev||event;
  var t=oEvent.clientY-mouseStart.y+bottomStart.y;
  var h=t+oDiv.offsetHeight;
 
  if(h<oDiv.offsetHeight)
  {
   h=oDiv.offsetHeight;
  }
  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
  {
   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
  }
 
  oDiv2.style.height=h+"px";
 };
 function stopDrag2()
 {
  if(bottom.releaseCapture)
  {
   bottom.onmousemove=null;
   bottom.onmouseup=null;
   bottom.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag2,true);
   document.removeEventListener("mouseup",stopDrag2,true);
  }
 };
 //往左右同时拽
 oDiv.onmousedown=function(ev)
 {
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  divStart.x=oDiv.offsetLeft;
  divStart.y=oDiv.offsetTop;
  if(oDiv.setCapture)
  {
   oDiv.onmousemove=doDrag;
   oDiv.onmouseup=stopDrag;
   oDiv.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag,true);
   document.addEventListener("mouseup",stopDrag,true);
  }
  zhezhao.style.display='block';
 };
 function doDrag(ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+divStart.x;
  var t=oEvent.clientY-mouseStart.y+divStart.y;
 
 
  var w=l+oDiv.offsetWidth;
  var h=t+oDiv.offsetHeight;
 
  if(w<oDiv.offsetWidth)
  {
   w=oDiv.offsetWidth;
  }
  else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
  {
   w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
  }
  if(h<oDiv.offsetHeight)
  {
   h=oDiv.offsetHeight;
  }
  else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
  {
   h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
  }
 
  oDiv2.style.width=w+"px";
  oDiv2.style.height=h+"px";
 };
 function stopDrag()
 {
  if(oDiv.releaseCapture)
  {
   oDiv.onmousemove=null;
   oDiv.onmouseup=null;
   oDiv.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag,true);
   document.removeEventListener("mouseup",stopDrag,true);
  }
  zhezhao.style.display='none';
 };
 
 //h2完美拖拽
 h2.onmousedown=function(ev)
 {
  var oEvent=ev||event;
  mouseStart.x=oEvent.clientX;
  mouseStart.y=oEvent.clientY;
  divStart.x=oDiv2.offsetLeft;
  divStart.y=oDiv2.offsetTop;
 
  if(h2.setCapture)
  {
   h2.onmousemove=doDrag3;
   h2.onmouseup=stopDrag3;
   h2.setCapture();
  }
  else
  {
   document.addEventListener("mousemove",doDrag3,true);
   document.addEventListener("mouseup",stopDrag3,true);
  }
 
  zhezhao.style.display='block';
 };
 function doDrag3(ev)
 {
  var oEvent=ev||event;
  var l=oEvent.clientX-mouseStart.x+divStart.x;
  var t=oEvent.clientY-mouseStart.y+divStart.y;
  if(l<0)
  {
   l=0;
  }
  else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
  {
   l=document.documentElement.clientWidth-oDiv2.offsetWidth;
  }
  if(t<0)
  {
   t=0;
  }
  else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
  {
   t=document.documentElement.clientHeight-oDiv2.offsetHeight;
  }
  oDiv2.style.left=l+"px";
  oDiv2.style.top=t+"px";
 };
 function stopDrag3()
 {
  if(h2.releaseCapture)
  {
   h2.onmousemove=null;
   h2.onmouseup=null;
   h2.releaseCapture();
  }
  else
  {
   document.removeEventListener("mousemove",doDrag3,true);
   document.removeEventListener("mouseup",stopDrag3,true);
  }
 
  zhezhao.style.display='none';
 }
};
</script>
</head>
<body>
<div id="div2">
 <div style="width:100%; height:100%; overflow:hidden;">
 <h2>完美的拖拽</h2>
 <p>体验不错的JavaScript网页拖动,除了拖动,还可拖动放大,像Windows窗口一样被放大或缩小,只要按住层的右下角,就可以收放自如的放大或缩小。想使用的朋友,可将代码里的Js封装成类,从外部引入想必更合理些。'</p>
 <div id="right"></div>
 <div id="div1">拖</div>
 <div id="bottom"></div>
 </div>
</div>
<div id="zhezhao"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文实例讲述了Js可拖拽放大的层拖动特效实现方法。分享给大家供大家参考。具体实现方法如...

js实现拖拽效果,js实现拖拽

首先来了解一下,面向对象练习的基本规则和问题:

先写出普通的写法,然后改成面向对象写法项
普通方法变形

·尽量不要出现函数嵌套函数
·可以有全局变量
·把onload函数中不是赋值的语句放到单独函数中

改成面向对象

·全局变量就是属性
·函数就是方法
·onload中创建对象
·改this指针问题

先把拖拽效果的布局完善好:
HTML结构:

<div id="box"></div>

csc样式:
#box{position: absolute;width: 200px;height: 200px;background: red;}

第一步,首先把面向过程的拖拽回顾一下

复制代码 代码如下:

window.onload = function (){
    // 获取元素和初始值
    var oBox = document.getElementById('box'),
        disX = 0, disY = 0;
    // 容器鼠标按下事件
    oBox.onmousedown = function (e){
        var e = e || window.event;
        disX = e.clientX - this.offsetLeft;
        disY = e.clientY - this.offsetTop;
        document.onmousemove = function (e){
            var e = e || window.event;
            oBox.style.left = (e.clientX - disX) + 'px';
            oBox.style.top = (e.clientY - disY) + 'px';
        };
        document.onmouseup = function (){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
};

第二步,把面向过程改写为面向对象

复制代码 代码如下:

window.onload = function (){
    var drag = new Drag('box');
    drag.init();
};
// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}
Drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);
        // 阻止默认事件
        return false;
    };
};
Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mouseMove(e);
    }; 
    document.onmouseup = function (){
        me.mouseUp();
    }
};
Drag.prototype.mouseMove = function (e){
    this.obj.style.left = (e.clientX - this.disX) + 'px';
    this.obj.style.top = (e.clientY - this.disY) + 'px';
};
Drag.prototype.mouseUp = function (){
    document.onmousemove = null;
    document.onmouseup = null;
};

第三步,看看代码有哪些不一样

首页使用了构造函数来创建一个对象:

复制代码 代码如下:

// 构造函数Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

遵守前面的写好的规则,把全局变量都变成属性!

然后就是把函数都写在原型上面:

复制代码 代码如下:

Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};

先来看看init函数:

复制代码 代码如下:

Drag.prototype.init = function (){
    // this指针
    var me = this;
    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);
        // 阻止默认事件
        return false;
    };
};

我们使用me变量来保存了this指针,为了后面的代码不出现this指向的错误

接着是mouseDown函数:

复制代码 代码如下:

Drag.prototype.mouseDown = function (e){
    // this指针
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;
    document.onmousemove = function (e){
        var e = e || window.event;
        me.mouseMove(e);
    }; 
    document.onmouseup = function (){
        me.mouseUp();
    }
};

改写成面向对象的时候要注意一下event对象。因为event对象只出现在事件中,所以我们要把event对象保存变量,然后通过参数传递!

后面的mouseMove函数和mouseUp函数就没什么要注意的地方了!

要注意的问题

关于this指针的问题,面向对象里面this特别重要!
this拓展阅读:

关于event对象的问题,event对象只出现在事件里面,所以写方法的时候要注意一下!

首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变...

写了个js自制滚动条,首先,先看一下demo(点击这里) 先

scrollself.init('scrollpanel2','scrollcontent2','scrollbar2','scrollblock2');

    }

        // prevent(event);
    }

        var newbTop=event.clientY-startY+bTop,
            newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;

因为很卡,我就又上网看了一下别人的代码,然后把根据别人的思路把代码改了一下,就有了左边那个绿色的那个demo,很明显,效果好了很多,代码:

        if(e.preventDefault){
            e.preventDefault();
        }
        if(e.stopPropagation){
            e.stopPropagation();
        }
        e.cancelBubble=true;
        e.returnValue=false;
    }

            scrollblock.style.top=newbTop+'px';
            scrollcontent.style.top=newcTop+'px';
        }else{
            isDrag=false;
        }

    }

之所以说它肤浅,比较一下两个demo的滚动效果就知道了,右边的拉动滚动块时候,体验效果好差,很卡,而左边的就流畅多了。

    var scrollblock, //滚动块
        scrollcontent,  //被滚动的内容
        scrollbar,    //滚动条
        scrollpanel,    //滚动内容的滚动区域
        cdistance,  //滚动内容要滚动的距离
        bdistance,    //滚动块要滚动的距离
        minuTop, //滚动条头尾剩下的空白
        cTop,    //滚动内容的top
        startY=0,    //滚动动作开始初鼠标的位置
        bTop=0;    //滚动动作开始初滚动块的top

}());

您可能感兴趣的文章:

  • 判断滚动条到底部的JS代码
  • 当滚动条滚动到页面底部自动加载增加内容的js代码
  • js动态移动滚动条至底部示例代码
  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
  • JS 获取滚动条高度示例代码
  • js控制滚动条缓慢滚动到顶部实现代码
  • js模拟滚动条(横向竖向)
  • javascript jscroll模拟html元素滚动条
  • js判断滚动条是否已到页面最底部或顶部实例

有两个demo,右边那个黑色那个,是我一开始写的比较肤浅的代码:

scroll.init('scrollpanel','scrollcontent','scrollbar','scrollblock');

            if(newbTop<minuTop){
                newbTop=minuTop;
                newcTop=0;
            }else{
                if(newbTop>bdistance+minuTop){
                    newcTop=-cdistance;
                    newbTop=bdistance+minuTop;
                }
            }

    function stopDrag(event){
        if(scrollblock.releaseCapture){

复制代码 代码如下:

    function mouseDown(event){
        event=event||window.event;
        startY=event.clientY;
        bTop=scrollblock.offsetTop;
        cTop=scrollcontent.offsetTop;
        if(scrollblock.setCapture){

    var scrollblock, //滚动块
        scrollcontent,  //被滚动的内容
        scrollbar,    //滚动条
        scrollpanel,    //滚动内容的滚动区域
        cdistance,  //滚动内容要滚动的距离
        bdistance,    //滚动块要滚动的距离
        minuTop, //滚动条头尾剩下的空白
        cTop,    //滚动内容的top
        startY=0,    //滚动动作开始初鼠标的位置
        bTop=0,    //滚动动作开始初滚动块的top
        isDrag=false;  //是否拉动滚动块

        // prevent(event);

            scrollblock.onmousemove=doDrag;
            scrollblock.onmouseup=stopDrag;
            scrollblock.setCapture();
        }else{
            document.addEventListener("mousemove",doDrag,true);
            document.addEventListener("mouseup",stopDrag,true);
        }

var scroll=(function(){

比较了一下两个的代码,其实修改的不多,就有一点很大的不同,流畅的那一个(左边绿色那一个)多了这个东西——setCapture、releaseCapture。

        isDrag=false;

    function prevent(e){

        if(newbTop<minuTop){
            newbTop=minuTop;
            newcTop=0;
        }else if(newbTop>bdistance+minuTop){
            newcTop=-cdistance;
            newbTop=bdistance+minuTop;
        }
        scrollblock.style.top=newbTop+'px';
        scrollcontent.style.top=newcTop+'px';

    function addHandler(){
        scrollblock.onmousedown=mouseDown;
        scrollblock.onmousemove=mouseMove;
        scrollblock.onmouseup=mouseUp;
        document.onmouseup=mouseUp;
    }

复制代码 代码如下:

    function mouseMove(event){
        if(isDrag){

            enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
            addHandler();
        }
    }

var scrollself=(function(){

    function mouseUp(event){

    return{
        init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
            scrollblock=document.getElementById(scrollblock_id);
            scrollcontent=document.getElementById(scrollcontent_id);
            scrollbar=document.getElementById(scrollbar_id);
            scrollpanel=document.getElementById(scrollpanel_id);
            minuTop=scrollblock.offsetTop;
            cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
            bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;

}());

具体是怎样的,再研究一下先。

            event=event||window.event;

    function doDrag(event){
        event=event||window.event;

    }

            scrollblock.onmousemove=doDrag;
            scrollblock.onmouseup=stopDrag;
            scrollblock.releaseCapture();
        }else{
            document.removeEventListener("mousemove",doDrag,true);
            document.removeEventListener("mouseup",stopDrag,true);
        }
        scrollblock.onmousemove=null;
        scrollblock.onmouseup=null;
    }
    return{
        init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
            scrollblock=document.getElementById(scrollblock_id);
            scrollcontent=document.getElementById(scrollcontent_id);
            scrollbar=document.getElementById(scrollbar_id);
            scrollpanel=document.getElementById(scrollpanel_id);
            minuTop=scrollblock.offsetTop;
            cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
            bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;
            scrollblock.onmousedown=mouseDown;
            enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
        }
    }

    function mouseDown(event){
        isDrag=true;
        event=event||window.event;
        startY=event.clientY;
        bTop=scrollblock.offsetTop;
        cTop=scrollcontent.offsetTop;

            var newbTop=event.clientY-startY+bTop,
                newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;

本文由美高梅网址发布于关于美高梅,转载请注明出处:自制滚动条的小例子,js实现拖拽效果

上一篇:iframe数据共享,JS中Iframe之间传值的方法 下一篇:loadScript异步加载脚本示例讲解,非阻塞脚本的使
猜你喜欢
热门排行
精彩图文