整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一個元素，點擊后跟隨鼠標運動，松開鼠標后，自由運動，但物體有重力效果。
一、HTML
<input type="button" value="開始運動" onclick="startMove()" />
<div id="div1" ></div>
二、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/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
