码迷,mamicode.com
首页 > Web开发 > 详细

CSS3_拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条

时间:2018-11-16 21:34:28      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:dir   isp   listener   default   sans   tle   play   lis   hidden   

拖曳原理:

元素的初始位置 + 鼠标距离差 = 元素最终位置

  • 技术分享图片

 

  • 使元素可以拖动
    • function dragElement(obj){
          obj.onmousedown = function(e){
              e = e || window.event;    // 兼容 IE
              
              obj.setCapture && obj.setCapture();    // 只有 IE 支持,处理 IE8 ctrl+A
              
              // 鼠标初始坐标
              var mouseX = e.clientX;
              var mouseY = e.clientY;
              
              // 元素初始坐标
              var eleX = obj.offsetLeft;
              var eleY = obj.offsetTop;
              
              document.onmousemove = function(e){
                  e = e || window.event;
                  
                  // 鼠标新坐标
                  var newMouseX = e.clientX;
                  var newMouseY = e.clientY;
                  
                  // 元素的新坐标 = 元素初始坐标+(鼠标新坐标-鼠标初始坐标)
                  obj.style.left = eleX + newMouseX - mouseX +"px";
                  obj.style.top = eleY + newMouseY - mouseY + "px";
              };
              
              document.onmouseup = function(){
                  document.onmousemove = null;
                  document.onmouseup = null;
                  
                  obj.releaseCapture && obj.releaseCapture();
              };
              
              e.preventDefault && e.preventDefault();
              return false;    // 处理高级浏览器 ctrl+A
          };
      };

 

拖曳: 范围限定()

超出临界值,令其等于临界值

  • 上侧临界值 = 0;

 

  • 右侧临界值 = 视窗 width - ele.offsetWidth;

 

  • 下侧临界值 = 视窗 height - ele.offsetHeight;

 

  • 左侧临界值 = 0;
  • function dragRange(obj, borderRange){    /**** 指定 borderRange 实现磁性吸附 ****/
        borderRange = borderRange || 0;
        obj.onmousedown = function(e){
            e = e || window.event;
            
            obj.setCapture && obj.setCapture();    // 只有 IE 支持,处理 IE8 ctrl+A
            
            var mouseX = e.clientX;
            var mouseY = e.clientY;
            
            var eleX = obj.offsetLeft;
            var eleY = obj.offsetTop;
            
            document.onmousemove = function(e){
                e = e || window.event;
                
                var newMouseX = e.clientX;
                var newMouseY = e.clientY;
                
                fixedX = eleX + newMouseX - mouseX;
                fixedY = eleY + newMouseY - mouseY;
                
                if(fixedX < borderRange){
                    fixedX = 0;
                }else if(fixedX > (document.documentElement.clientWidth-obj.clientWidth-borderRange)){
                    fixedX = document.documentElement.clientWidth-obj.clientWidth-parseInt(obj.style.border)*2;
                }
                
                if(fixedY < borderRange){
                    fixedY = 0;
                }else if(fixedY > (document.documentElement.clientHeight-obj.clientHeight-borderRange)){
                    fixedY = document.documentElement.clientHeight-obj.clientHeight-parseInt(obj.style.border)*2;
                }
                
                obj.style.left = fixedX + "px";
                obj.style.top = fixedY + "px";
            };
            
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
                
                obj.releaseCapture && obj.releaseCapture();
            };
            
            return false;    // 处理高级浏览器 ctrl+A
        };
    };

 

九宫格碰撞检测

  • ele.offsetLeft 或者 ele.offsetTop
    • 获取的是 元素在 包含块 中的坐标

 

  • ele.getBoundingClientRect();
    • 获取元素在视窗中的坐标(由该 元素.getClientRects() 返回的一组矩形集合)

 

 

自定义滚动条

技术分享图片

 

 

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>自定义滚动条</title>
    
            <style type="text/css">
                body {
                    width: 100%;
                    color: #000;
                    background: #96b377;
                    font: 14px Helvetica, Arial, sans-serif;
                }
                
                html,
                body {
                    height: 100%;
                    overflow: hidden;
                }
                
                #things {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    font-size: 27px;
                    font-weight: 700;
                    color: #210202;
                    padding-right: 40px;
                }
                
                /**** DIY Scroll ****/
                #diy_scroll_box{
                    position: fixed;
                    top: 0px;
                    right: 0px;
                    z-index: 7777;
                    
                    width: 40px;
                    height: 100%;
                    background-color: #eee;
                }
                
                #diy_scroll {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    z-index: 8888;
                    
                    width: 100%;
                    height: 20%;
                    background-color: #949494;
                }
                
                #diy_scroll:hover {
                    background-color: #c0c0c0;
                }
                
                /**** 上下按键 ****/
                #scroll_up_btn,
                #scroll_down_btn {
                    position: absolute;
                    z-index: 9999;
                    
                    width: 40px;
                    height: 40px;
                    background-color: #456;
                }
                
                #scroll_up_btn {
                    top: 0px;
                    right: 0px;
                }
                
                #scroll_down_btn {
                    bottom: 0px;
                    right: 0px;
                }
                
                #scroll_up{
                    position: absolute;
                    top: -10px;
                    
                    border: 20px solid red;
                    border-top: 20px solid #f000;
                    border-right: 20px solid #f000;
                    border-left: 20px solid #f000;
                    border-bottom-color: #b3e4aa;
                }
                
                #scroll_down{
                    position: absolute;
                    top: 10px;
                    
                    border: 20px solid red;
                    border-bottom: 20px solid #f000;
                    border-right: 20px solid #f000;
                    border-left: 20px solid #f000;
                    border-top-color: #b3e4aa;
                }
                
                #scroll_up:hover {
                    border-bottom-color: #c5ffbb;
                }
                
                #scroll_down:hover {
                    border-top-color: #c5ffbb;
                }
                
            </style>
        </head>
        
        <body>
            
            <div id="diy_scroll_box">
                <div id="scroll_up_btn">
                    <div id="scroll_up">
                    </div>
                </div>
                
                <div id="diy_scroll">
                </div>
                
                <div id="scroll_down_btn">
                    <div id="scroll_down">
                    </div>
                </div>
            </div>
            
            <div id="things">
                <pre>
            
            
            
            
                姓名:朱元璋别名(外号):朱重八、朱国瑞
    
                  性别:男
    
                  民族:汉
    
                  血型:?
    
                  学历:无文凭,秀才举人进士统统的不是,后曾自学过
    
                  职业:皇帝
    
                  家庭出身:(至少三代)贫农
    
                  生卒:1328-1398
    
                  最喜欢的颜色:黄色(这个好像没得选)
    
                  社会关系:
    
                  父亲:朱五四,农民
    
                  母亲:陈氏,农民(不好意思,史书中好像没有她的名字)
    
                  座右铭:你的就是我的,我还是我的
    
                  主要经历:
    
                  1328年-1344年放牛
    
                  1344年-1347年做和尚,主要工作是出去讨饭(这个……)
    
                  1347年-1352年做和尚主要工作是撞钟
    
                  1352年-1368年造反(这个猛)
    
                  1368年-1398年主要工作是做皇帝
    
                  一切的事情都从1328年的那个夜晚开始,农民朱五四的妻子陈氏生下了一个男婴,
                大家都知道了,这个男婴就是后来的朱元璋。
                大凡皇帝出世,后来的史书上都会有一些类似的怪象记载。
    
                  比如刮风啊,下暴雨啊,冒香气啊,天上星星闪啊,到处放红光啊
                ,反正就是要告诉你,这个人和别人不一样。
                朱元璋先生也不例外,他出生时,红光满地,夜间房屋中出现异光,以致于邻居以为失
                火了,跑来相救(明实录)。
                </pre>
            </div>
            
            <!-- javascript 代码 -->
            <script type="text/javascript">
                var things = document.getElementById("things");
                
                /**** DIY Scroll ****/
                var diyScroll = document.getElementById("diy_scroll");
                var btnHeight = 40;
                diyScroll.style.top = btnHeight+"px";
                
                var diyScrollHeight = document.documentElement.clientHeight-btnHeight*2;
                var thingsScrollHeight = things.offsetHeight-document.documentElement.clientHeight;
                
                barHeight = diyScrollHeight*(document.documentElement.clientHeight)/things.offsetHeight;
                diyScroll.style.height = barHeight +"px";
                    
                var contentStartTop = 0;
                var mouseStartY = 0;
                var barStartY = 0;
                
                /**** 点击滑块 ****/
                diyScroll.onmousedown = function(e){
                    e = e || window.event;
                    
                    diyScroll.setCapture && diyScroll.setCapture();
                    
                    mouseStartY = e.clientY;
                    barStartY = diyScroll.offsetTop;
                    contentStartTop = things.offsetTop;
                    
                    document.onmousemove = function(e){
                        e = e || window.event;
                        
                        var mouseEndY = e.clientY;
                        var barEndY = barStartY + mouseEndY - mouseStartY;
                        
                        if(barEndY < btnHeight){
                            barEndY = btnHeight;
                        }else if(barEndY > (document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight)){
                            barEndY = document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight;
                        }
                        
                        diyScroll.style.top = barEndY+"px";
                        things.style.top = contentStartTop + -thingsScrollHeight*(barEndY-barStartY)/(diyScrollHeight-barHeight) +"px";
                    };
                
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                        diyScroll.releaseCapture && diyScroll.releaseCapture();
                    }
                    
                    e.preventDefault && e.preventDefault();
                    return false;
                };
                
                document.onmousewheel = scrollWheelFunc;
                document.addEventListener && document.addEventListener("DOMMouseScroll", scrollWheelFunc, false);
                /**** 滚轮事件 ****/
                function scrollWheelFunc(e){
                    e = e || window.event;
                    
                    var wheelDir = 0;
                    var shouldMove = 5;
                    
                    if(e.wheelDelta){
                        wheelDir = (e.wheelDelta>0)?"up":"down";
                        shouldMove = (e.wheelDelta>0)?(-5):5;
                    }else if(e.detail){
                        wheelDir = (e.detail>0)?"down":"up";
                        shouldMove =  (e.detail>0)?5:(-5);
                    };
                    
                    var barTop = diyScroll.offsetTop;
                    var barOffset = barTop;
                    
                    barTop += shouldMove;
                    
                    if(barTop < btnHeight){
                        barTop = btnHeight;
                    }else if(barTop > (document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight)){
                        barTop = document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight;
                    };
                    
                    diyScroll.style.top =  barTop+"px";
                    
                    barOffset = barOffset - barTop;
                    
                    contentStartTop = things.offsetTop;
                    things.style.top = contentStartTop + thingsScrollHeight*barOffset/(diyScrollHeight-barHeight) +"px";
                    
                    e.preventDefault && e.preventDefault();
                    return false;
                };
                
                /**** 点击按键 ****/
                var scrollDown = document.getElementById("scroll_down_btn");
                var scrollUp = document.getElementById("scroll_up_btn");
                scrollUp.onclick = function(){
                    scrollBtnFunc(-5);
                }
                scrollDown.onclick = function(){
                    scrollBtnFunc(5);
                }
                
                function scrollBtnFunc(barOffset){
                    var barTop = diyScroll.offsetTop;
                    
                    if((barTop+barOffset) < btnHeight){
                        barOffset = btnHeight - barTop;
                    }else if((barTop+barOffset) > (document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight)){
                        barOffset = document.documentElement.clientHeight - btnHeight - diyScroll.offsetHeight - barTop;
                    };
                    diyScroll.style.top = barTop+barOffset+"px";
                    
                    contentStartTop = things.offsetTop;
                    things.style.top = contentStartTop + -thingsScrollHeight*barOffset/(diyScrollHeight-barHeight) +"px";
                
                }
            </script>
        </body>
    </html>

 

CSS3_拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条

标签:dir   isp   listener   default   sans   tle   play   lis   hidden   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9971685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!