Heim  >  Artikel  >  Web-Frontend  >  Native JS-Implementierungsmethode zur Bestimmung von Kollisionen (interessantes Beispiel)

Native JS-Implementierungsmethode zur Bestimmung von Kollisionen (interessantes Beispiel)

亚连
亚连Original
2018-05-18 11:06:381800Durchsuche

Das Folgende ist die Methode, die ich für Sie zusammengestellt habe, um natives JS zur Bestimmung von Kollisionen zu implementieren.

Native JS-Implementierungsmethode zur Bestimmung von Kollisionen (interessantes Beispiel)

HTML-Seitencode:

<div id="d1"></div>  
<div id="d2"></div>

CSS-Seitencode:

<style type="text/css">  
        * {  
            padding: 0px;  
            margin: 0px;  
         }  
        #d1{  
            width: 100px;  
            height: 100px;  
            background: red;  
            position: absolute;  
        }  
        #d2{  
            width: 200px;  
            height: 200px;  
            background: yellow;  
            position: absolute;  
            top: 200px;  
            left: 400px;  
            position: absolute;  
        }  
</style>

JS-Seitencode:

<script type="text/javascript">  
    div=document.querySelectorAll("div");   
function hit(obj){  
    obj.onmousedown=function(e){  
        var e=e||window.event;  
        var dX=e.offsetX;  
        var dY=e.offsetY;  
        document.onmousemove=function(e){  
            var x=e.clientX;  
            var y=e.clientY;  
            obj.style.left=x-dX+"px";  
            obj.style.top=y-dY+"px";  
            if(div[0].offsetTop+div[0].offsetHeight>=div[1].offsetTop && div[0].offsetTop<=div[1].offsetTop+div[1].offsetHeight && div[0].offsetLeft+div[0].offsetWidth>=div[1].offsetLeft && div[0].offsetLeft<=div[1].offsetLeft+div[1].offsetWidth){  
                console.log("你撞我了!再撞一个试试!")  
            };  
    }  
    document.onmouseup=function(){  
        document.onmousemove=null;  
    }  
}     
}  
hit(div[0]);  
hit(div[1]);  
</script>

Das Obige ist was Ich habe eine Methode zusammengestellt, mit der Sie Kollisionen in Ihrem nativen JS ermitteln können. Ich hoffe, dass sie Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Einfache Bedienung des JS-Download-Dateistreams (Code angehängt)

Verifizierungscode in js generieren und überprüfen (Enthält Code, einfach und grob, Unterricht und Schulung inklusive)

Über einfache Aufrufe zum Abrufen von JSON-Daten in JS (Code angehängt, einfach und grob)

Das obige ist der detaillierte Inhalt vonNative JS-Implementierungsmethode zur Bestimmung von Kollisionen (interessantes Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn