javascript代码写抛物运动

一个元素，点击后跟随鼠标运动，松开鼠标后，自由运动，但物体有重力效果。

一、HTML

二、CSS

#div1 {

width:100px;

height:100px;

/*设置元素背景,径向变化*/

background:radial-gradient(red 15%,yellow 30%,green 80%);

position:absolute;

/*设置圆角*/

border-radius: 50%;

}

三、script

window.onload=function ()

{

var oDiv=document.getElementById('div1');

var lastX=0;

var lastY=0;

oDiv.onmousedown=function (ev)

{

var oEvent=ev||event;

var disX=oEvent.clientX-oDiv.offsetLeft;

var disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev)

{

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

iSpeedX=l-lastX;

iSpeedY=t-lastY;

lastX=l;

lastY=t;

document.title='x:'+iSpeedX+', y:'+iSpeedY;

};

document.onmouseup=function ()

{

document.onmousemove=null;

document.onmouseup=null;

startMove();

};

clearInterval(timer);

};

var timer=null;

var iSpeedX=10;

var iSpeedY=10;

function startMove()

{

clearInterval(timer);

timer=setInterval(function (){

var oDiv=document.getElementById('div1');

iSpeedY+=3;

var l=oDiv.offsetLeft+iSpeedX;

var t=oDiv.offsetTop+iSpeedY;

if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)

{

iSpeedY*=-0.8;

iSpeedX*=0.8;

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

else if(t<=0)

{

iSpeedY*=-1;

iSpeedX*=0.8;

t=0;

}

if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)

{

iSpeedX*=-0.8;

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

else if(l<=0)

{

iSpeedX*=-0.8;

l=0;

}

if(Math.abs(iSpeedX)<1)

{

iSpeedX=0;

}

if(Math.abs(iSpeedY)<1)

{

iSpeedY=0;

}

// 检测停止

if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)

{

clearInterval(timer);

alert('停止');

}

else

{

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

}

document.title=iSpeedX;

}, 30);

}

四、最终效果

：我以前没有思考过这个问题，也未看过相关的讨论，以下内容是我听说有过这种讨论后，自己临时起意所做的一些推理和思考。原文参见笔者在《关于《大气物理学》中有关大气稳定度证明缺陷的详细说明》一文后的讨论中的相关留言。

我以前没有看过有关这个话题的讨论，虽然这个话题在本文的议题下稍微有些偏题，但这个话题/问题本身的确挺有意思，值得深思。在尚未看过你们二位所提到的这些讨论内容之前，我说说我对这个问题的粗浅理解：

1.理想气体的内部压力来源，通过虚拟的钢瓶实验应该足以基本解答清楚（***），其根源应该就在于气体分子/原子间的各种相互作用，包括各种互相作用力，更包括热运动的碰撞导致的累计作用（如果我们站在一个放入气体中的测压器的角度去看待的话，可能更好理解这个问题），而后者应该才是导致气体压强的最大的来源。

2.至于气体为何会聚集在一起，尤其是大气压强与重力有何关系，这两个问题更加复杂些（尤其后者）。聚集在一起的原因，我想无外乎大概这么两个原因：要么是有固体边界的束缚（比如瓶子壁，袋子壁之类的），要么是有万有引力所导致的重力场之类的束缚（应该还包括电磁场之类的特殊情形与作用），由于有各种性质上可能完全不同的束缚作用的存在（也包括气体分子间的各种吸引力/排斥力等），才使得气体呈现出宏观的压强。如果是把该气体完全放在太空中，且完全开放地存在着，既无固定的边界束缚，也无外加的各种场作用力的束缚，那么气体分子必然会在热运动作用为主导的因素下出现四散奔逃的现象（先不考虑有电离等现象的复杂情形和特殊情形的气体，只说通常的大气成分的气体），从而会导致该气团的内部压强很快就下降了。

因此，按照上述梳理分析，并再次回到最初的问题，我认为导致气体压强（包括大气压强）的根源在于其被外界束缚，要么是有宏观实物形态存在的边界束缚（如瓶壁，袋子壁，或地表），要么是有以各种场作用力形式所导致的束缚，要么是几者兼而有之。在上述束缚的前提下，由于分子间的各种作用力的存在尤其是分子热运动的存在，从而产生了具有统计意义的气体压强。

这个问题再往远里说，还要涉及到如何理解和解释不同星球甚至类似星球的大气为何经常会截然不同的问题，那就更加复杂了，但经过上述的那些梳理分析，再去理解万有引力（重力）对该星球的大气压强是如何影响的应该可能就更加容易了，只是在数值计算上可能要考虑的因素会非常多因此计算起来可能会很复杂。

***虚拟钢瓶实验：将一个密封的钢瓶打开，让空气自然进入，达到平衡后，再关闭进气口严格密封起来，此时，钢瓶内部的空气与周围大气是彻底隔绝了的，可以认为完全不受大气圈中的大气压力和周围大气的重力的影响了。此时，再将这个钢罐不论是放在地球表面，还是放到太空中，钢罐中的空气压力应该是几乎不变的，顶多是当钢罐放在地表时，其内部空气会在不同水平高度处，有微小的因内部空气自己的重力产生的压力差，但这个差别应该极其微小，因为钢罐中的空气一共没有多少且密度极低。

转载请注明本文来自钟定胜科学网博客。
链接地址：http://blog.sciencenet.cn/blog-3234816-1251293.html

TML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能。

前面介绍了html5重力感应的基本原理：

html5重力感应剖析附源码

本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。

DeviceOrientation包括两个事件：

1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

HTML

页面上有一个div#hand，用来放置一个手摇的图片，div#result用来展示摇动后的结果信息。

<div id="hand" class="hand hand-animate"></div>
<div id="result"></div>

复制代码

我们可以使用CSS3来增强页面效果，使用-webkit-animation动画效果实现手摇图片的动态效果，具体请下载源代码查看。

Javascript

“摇一摇”这个动作即“一定时间内设备了一定距离”，因此通过devicemotion监听设备晃动获取到的x, y, z轴的值在一定时间范围内的变化率，即判断设备是否有进行晃动。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。

HTML5判断设备晃动的代码我们使用已经封装好的shake.js，项目地址：https://github.com/alexgibson/shake.js。

<script src="shake.js"></script>

复制代码

首先实例化Shake，然后启动开始监听设备运动情况，监听设备运动，回调监听结果：shakeEventDidOccur。

window.onload=function() {
var myShakeEvent=new Shake({
threshold: 15
});
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
var result=document.getElementById("result");
result.className="result";
var arr=['妹子一枚','福利图片一套','码农笔记一本','土豪金一台'];
var num=Math.floor(Math.random()*4);
result.innerHTML="恭喜，摇得"+arr[num]+"！";
setTimeout(function(){
result.className="result result-show";
}, 1000);
}
};

这里，函数shakeEventDidOccur()可以自定义，本例是将摇晃后的结果返回在页面上展示出来，请看DEMO演示。

http://bbs.qietu.com/html/yaoyiyao/

在线咨询

上一篇：如何使用LoadRunner进行Web网站性能测试？
下一篇：css实现网格布局

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javascript代码写抛物运动

您的项目需求