<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position:absolute;left:0;top:30px;}
</style>
<script>
var ispeedX = 0;
var ispeedY = 0;
window.onload = function(){
var oBtn = document.getElementsByTagName('input')[0];
var oDiv = document.getElementsByTagName('div')[0]; oBtn.onclick = function(){
elasticStartMove(oDiv);
};
var lastX = 0; /*拖的快就快碰撞,拖的慢就慢碰撞*/
var lastY = 0;
oDiv.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX-this.offsetLeft;
var disY = ev.clientY-this.offsetTop; document.onmouseover = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX-disX;
var t = oEvent.clientY-disY;
ispeedX = l-lastX;
ispeedY = t-lastY;
lastX = l;
lastY = t;
oDiv.style.left = l+'px';
oDiv.style.top = t+'px'; }; document.onmouseup = function(){
document.onmouseover = document.onmouseup = null;
elasticStartMove(oDiv);
};
};
}; function elasticStartMove(obj){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
ispeedY += 3; /*受重力因素,越来越快,加上重力摩擦会变得越来越小*/
var t = obj.offsetTop+ispeedY;
var l= obj.offsetLeft+ispeedX;
// alert("obj.offsetTop:"+obj.offsetTop+"ispeedY:"+ispeedY+"t:"+t);
if(t >= document.documentElement.clientHeight - obj.offsetHeight){
ispeedY *= -0.8;/*重力因素,让速度越来越小,高度不会变*/
ispeedX *= 0.8;
t = document.documentElement.clientHeight - obj.offsetHeight;
}else if(t<=0){
ispeedY *= -0.8;
t = 0;
}
if(l >= document.documentElement.clientWidth - obj.offsetWidth){
ispeedX *= -0.8;
l = document.documentElement.clientWidth - obj.offsetWidth; //避免超出范围碰撞,出现滚动条
}else if(l<=0){
ispeedX *= -0.8;
l = 0
}
/*如果isped为小数,会往回跑,300.3-300 299.5->299*/
if(Math.abs(ispeedX) <1){
ispeedX = 0;
}
if(Math.abs(ispeedY) <1){
ispeedY = 0;
}
if(ispeedX ==0 && ispeedY == 0 && t == document.documentElement.clientHeight - obj.offsetHeight ){
clearInterval(obj.timer); }else{
obj.style.top = t+'px';
obj.style.left = l+'px'; } },30); }
</script>
</head> <body>
<input type='button' value='开始运动'/>
<div></div>
</body>
</html>

js 碰撞+拖拽的更多相关文章

  1. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  2. js之拖拽事件

    js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...

  3. JS—实现拖拽

    JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...

  4. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  5. 原生Js实现拖拽(适用于pc和移动端)

    效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js 实现拖拽排序

    <!DOCTYPE> <html lang="zh-cn"> <head> <meta http-equiv="Content- ...

  8. jquery.dragsort.js 实现拖拽过程遇到的问题

    .在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...

  9. JS实现拖拽功能

    本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https:// ...

随机推荐

  1. cs231n spring 2017 lecture8 Deep Learning Networks

    1. CPU vs. GPU: CPU核心少(几个),更擅长串行任务.GPU有很多核心(几千个),每一个核都弱,有自己的内存(几个G),很适合并行任务.GPU最典型的应用是矩阵运算. GPU编程:1) ...

  2. MS15-020 文件共享漏洞利用

    Metasploit MS15-020漏洞利用 环境: 共享机/受害者:windows xp IP:192.168.222.1 攻击机:kali linux IP:192.168.10.1 msfco ...

  3. 林轩田机器学习基石笔记3—Types of Learning

    上节课我们主要介绍了解决线性分类问题的一个简单的方法:PLA.PLA能够在平面中选择一条直线将样本数据完全正确分类.而对于线性不可分的情况,可以使用Pocket Algorithm来处理.本节课将主要 ...

  4. IO流框架

    目录 IO流框架总结 字节流 字符流 IO流框架总结 普通IO / NIO 字节流 字节流是万能流,但是在处理字符方面有时候不太方便,一般用来处理二进制文件 字节输入流 InputStream int ...

  5. 将js进行到底:node学习3

    node重要API之NET--TCP编程之旅 废话:最近去了一趟上海会了会一个程序员朋友,途径SNH48握手会,说好我就去看看,没想到握手了王诗蒙,掉入巨坑:塞纳河.回来后边听着<春夏秋冬> ...

  6. virtualenv 个人指南

    virtualenv是解决一个机器上多个应用需要的Python版本不一致的问题,virtualenv就是用来为一个应用创建一套"隔离"的Python运行环境,解决了解决了不同应用间 ...

  7. MySQL远程访问失败的解决办法

    SQL连接预备知识:转载自https://jingyan.baidu.com/article/3ea51489e6cfbe52e61bba25.html问题:我想在另一个电脑通过navicat登陆本机 ...

  8. 使用Google BBR加速 VPS

    0X00 预备知识 在使用Google BBR之前,我们首先要了解它是什么. 了解计算机网络的人都知道,在TCP连接中,由于需要维持连接的可靠性,引入了拥塞控制和流量管理的方法.Google BBR就 ...

  9. selenium之浏览器、元素、鼠标等操作总结

    1    控制浏览器 Selenium 主要提供的是操作页面上各种元素的方法,但它也提供了操作浏览器本身的方法,比如浏览器的大小以及浏览器后退.前进按钮等. 1.1  控制浏览器窗口大小 在不同的浏览 ...

  10. iOS常用框架源码分析

    SDWebImage NSCache 类似可变字典,线程安全,使用可变字典自定义实现缓存时需要考虑加锁和释放锁 在内存不足时NSCache会自动释放存储的对象,不需要手动干预 NSCache的key不 ...