本文实例讲述了js实现碰撞检测的方法。分享给大家供大家参考,具体如下:
一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色,看测试图
看一下分析图:
当div1在div2的上边线(t2)以上的区域活动时,始终碰不上
当div1在div2的右边线(r2)以右的区域活动时,始终碰不上
当div1在div2的下边线(b2)以下的区域活动时,始终碰不上
当div1在div2的左边线(r2)以左的区域活动时,始终碰不上
除了以上四种情况,其他情况表示div1和div2碰上了,下面试完整测试代码
html部分:
<div id="div1"></div>
<div id="div2"></div>
css部分:
<style>
#div1{
width:100px ;height: 100px;background: green;
position: absolute;
}
#div2{
width:100px ;height: 100px;background: yellow;
position: absolute;left: 300px;top: 200px;z-index: -1;
}
</style>
js部分:
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var disX = 0;
var disY = 0;
oDiv.onmousedown = function (ev) {
var ev = ev|| window.event;
disX = ev.clientX - oDiv.offsetLeft;
disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function (ev) {
var ev = ev|| window.event;
var t1 = oDiv.offsetTop;
var l1 = oDiv.offsetLeft;
var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
var b1 = oDiv.offsetTop + oDiv.offsetHeight;
var t2 = oDiv2.offsetTop;
var l2 = oDiv2.offsetLeft;
var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
}else{
oDiv2.style.background = 'blue';
}
oDiv.style.left = ev.clientX - disX +'px';
oDiv.style.top = ev.clientY - disY +'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
在调用文件的顶部加入下例代码:document.write;我们可以在某个html中引用了你需要的js文件,我们可以通过拿到那个html文件的对象,然后在通过这个对象去引用js的方法。
本次整理希望可以帮助到需要的童鞋,闲暇无聊多瞅几眼保证能记住(记不住欢迎下方戳小编,小编一定给各位大佬寄“拖鞋”)。因为js这类的方法(技巧)总有新玩法,本篇文档会持续更新,建议收藏。
Heredoc 结构就象是没有使用双引号的双引号字符串,这就是说在 heredoc 结构中单引号不用被转义。其结构中的变量将被替换,但在 heredoc 结构中含有复杂的变量时要格外小心。其对格式化输出内容时,比较有用 。
输入一个值,返回其数据类型;数组去重;字符串去重;深拷贝 浅拷贝;reverse底层原理和扩展;圣杯模式的继承;找出字符串中第一次只出现一次的字母;找元素的第n级父元素
concat()连接两个或更多的数组,并返回结果。every()检测数值元素的每个元素是否都符合条件。filter()检测数值元素,并返回符合条件所有元素的数组。
是通过 js 操作 textarea input 输入框,只能操作输入框,不能操作其它元素。所有的 复制/剪切/粘贴 都是要在选中输入框中的文本之后,才进行操作的。
第一种:获取的时间戳是把毫秒改成000显示,因为这种方式只精确到秒,第二种和第三种是获取了当前毫秒的时间戳。
string.search()是JavaScript中的一个内置方法,用于搜索正则表达式和给定字符串对象之间的匹配。返回值:返回正则表达式与给定字符串对象之间的第一个匹配的索引,如果未找到匹配项则返回-1。
有的脚本会重写该方法,那么如何判断这个方法是否被重写了呢?浏览器根据 ECMScript 标准,为我们提供了很多原生的方法。但有的脚本会重写该方法,那么如何判断这个方法是否被重写了呢?
inline-blcok元素中间的空白符引起的间隙,处理方法总结包括:改变书写结构、使用font-size:0、使用margin负值、使用letter-spacing或word-spacing、丢失结束标签、W3C推荐 导航方法(兼容IE6等)、YUI的inline-block间隙处理等...
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!