zoukankan      html  css  js  c++  java
  • 碰撞检测

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #box{
                width:150px;
                height:150px;
                background:sandybrown;
                position: absolute;
                border:2px solid #ccc;
            }
            img{
                width:100%;
                height:100%;
            }
            #center{
                width:200px;
                height:160px;
                background:seagreen;
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-100px;
                margin-top:-80px;
            }
        </style>
    </head>
    <body>
        <div id="box"><img src="images/1.jpeg" alt=""></div>
        <div id="center"></div>
    
        <script>
            /*
                1.鼠标按下事件 onmousedown
                2.鼠标移动事件 onmousemove
                3.鼠标抬起事件 onmouseup
            */
            var box = document.getElementById('box');
            var center = document.getElementById('center');
            // 鼠标按下
            box.onmousedown = function(ev){
               var eve = event || ev;
               var X = eve.clientX - box.offsetLeft;  // 鼠标相对于box元素内部左边距
               var Y = eve.clientY - box.offsetTop;  // 鼠标相对于box元素内部上边距
    
                // 鼠标移动 变成 页面移动
                document.onmousemove = function(ev){
                    var eve = event || ev;
                    box.style.left = eve.clientX - X + 'px';  // 移动时,鼠标相对于浏览器左侧左边距 - 鼠标相对于box元素内部左边距 = 移动时元素应该坐落的横坐标
                    box.style.top = eve.clientY - Y + 'px';
    
                    // 四周范围判断
                    if(eve.clientX - X <=0){
                        box.style.left = 0 + 'px';
              
                    }
                     if(eve.clientY - Y <=0 ){
                        box.style.top = 0 + 'px';
    
                    }
                    if(eve.clientX - X >= document.documentElement.clientWidth - box.offsetWidth){
                        box.style.left = document.documentElement.clientWidth - box.offsetWidth + 'px' ;
                    }
                     if(eve.clientY - Y >= document.documentElement.clientHeight - box.offsetHeight){
                        box.style.top = document.documentElement.clientHeight - box.offsetHeight + 'px'
                    }
    
                    // 碰撞检测
                    if(eve.clientX - X + box.offsetWidth >= center.offsetLeft && eve.clientY - Y + box.offsetHeight >= center.offsetTop && eve.clientX - X <= center.offsetLeft + center.offsetWidth && eve.clientY - Y <= center.offsetTop + center.offsetHeight ){
                        center.style.background = 'gray';
                    }else{
                        center.style.background = '';
                    }
                    
                }
    
                // 鼠标抬起
                document.onmouseup = function(){   // 移动、抬起事件置空
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
    
                return false;  // 去除浏览器默认样式,如:文字选中,图片拖拽等
            }
        </script>
    </body>
    </html>

    效果

  • 相关阅读:
    BestCoder17 1001.Chessboard(hdu 5100) 解题报告
    codeforces 485A.Factory 解题报告
    codeforces 485B Valuable Resources 解题报告
    BestCoder16 1002.Revenge of LIS II(hdu 5087) 解题报告
    codeforces 374A Inna and Pink Pony 解题报告
    codeforces 483B Friends and Presents 解题报告
    BestCoder15 1002.Instruction(hdu 5083) 解题报告
    codeforces 483C.Diverse Permutation 解题报告
    codeforces 483A. Counterexample 解题报告
    NSArray中地内存管理 理解
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13276061.html
Copyright © 2011-2022 走看看