delete conflicting/orphaned docs (zh-CN) (#1412)

* delete conflicting docs (zh-CN)

* and redirects

* do orphaned as well

* fix

* remove more orphans

* revert orphaned docs that can identify origin

* move orphaned docs to current loc

* adjust slug path

* fix redirect change from rebase

Co-authored-by: Irvin <irvinfly@gmail.com>

4 files changed, 570 insertions, 0 deletions

diff --git a/files/zh-cn/web/events/creating_and_triggering_events/index.html b/files/zh-cn/web/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..686d6471af
--- /dev/null
+++ b/files/zh-cn/web/events/creating_and_triggering_events/index.html
@@ -0,0 +1,138 @@
+---
+title: 创建和触发 events
+slug: Web/Events/Creating_and_triggering_events
+translation_of: Web/Events/Creating_and_triggering_events
+tags:
+  - Advanced
+  - DOM
+  - Guide
+  - JavaScript
+  - NeedsContent
+  - events
+---
+<p>本文演示了如何创建和分派DOM事件。这些事件通常称为<strong>合成事件</strong>，而不是浏览器本身触发的事件。</p>
+
+<h2 id="创建自定义事件">创建自定义事件</h2>
+
+<p>Events 可以使用 <a href="/zh/docs/Web/API/Event"><code>Event</code></a> 构造函数创建如下：</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);</pre>
+
+<p>上述代码使用了 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 方法。</p>
+
+<p><span style="line-height: 1.5;">绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 </span><a href="#The_old-fashioned_way" style="line-height: 1.5;" title="#过时的方式">过时的方式</a><span style="line-height: 1.5;">  一节。</span></p>
+
+<h3 id="添加自定义数据_–_CustomEvent">添加自定义数据 – CustomEvent()</h3>
+
+<p>要向事件对象添加更多数据，可以使用 <a href="/zh-CN/docs/Web/API/CustomEvent">CustomEvent</a> 接口，detail 属性可用于传递自定义数据。<br>
+ 例如，event 可以创建如下：</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p><span style="line-height: 1.5;">下面的代码允许你在事件监听器中访问更多的数据：</span></p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="过时的方式">过时的方式</h3>
+
+<p>早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：</p>
+
+<pre class="brush: js">// Create the event.
+var event = document.createEvent('Event');
+
+// Define that the event name is 'build'.
+event.initEvent('build', true, true);
+
+// Listen for the event.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+</pre>
+
+<h3 id="事件冒泡">事件冒泡</h3>
+
+<p>通常需要从子元素触发事件，并让祖先捕获它：</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () =&gt; textarea.value }
+});
+
+// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
+textarea.addEventListener('input', e =&gt; e.target.dispatchEvent(eventAwesome));</pre>
+
+<h3 id="动态创建和派发事件">动态创建和派发事件</h3>
+
+<p>元素可以侦听尚未创建的事件：</p>
+
+<pre class="brush: html"><code>&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;</code></pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () =&gt; textarea.value } }))
+});</pre>
+
+
+
+<h2 id="触发内置事件">触发内置事件</h2>
+
+<p>下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。<a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">参见这个动态示例</a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">参见</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/events/detecting_device_orientation/index.html b/files/zh-cn/web/events/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..ba00972351
--- /dev/null
+++ b/files/zh-cn/web/events/detecting_device_orientation/index.html
@@ -0,0 +1,317 @@
+---
+title: 检测设备方向
+slug: Web/Events/Detecting_device_orientation
+translation_of: Web/Events/Detecting_device_orientation
+tags:
+  - API
+  - Device Orientation
+  - Intermediate
+  - Mobile
+  - Motion
+  - Orientation
+  - Reference
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>有越来越多的基于web的设备能够确定它们的方向; 也就是说，它们可以报告数据以指示基于重力方向的方向改变。特别地，手持设备如手机可以利用这些信息以自动旋转屏幕，保持内容直立，当设备旋转至横屏时（宽度大于高度），提供网页内容的横屏视图。</p>
+
+<p>有两种Javascript事件负责处理设备方向信息。第一种是{{domxref("DeviceOrientationEvent")}}，它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，让交互式地响应用户移动设备旋转和仰角变化成为可能。</p>
+
+<p>第二种是{{domxref("DeviceMotionEvent")}}，它会在加速度发生改变时触发。跟{{domxref("DeviceOrientationEvent")}}不同，{{domxref("DeviceMotionEvent")}}监听的是相应方向上加速度的变化。传感器通常都具有监听{{domxref("DeviceMotionEvent")}}的能力，包括笔记本中用于保护移动中的存储设备的传感器。{{domxref("DeviceOrientationEvent")}}事件更多见于移动设备中。</p>
+
+<h2 id="处理方向（orientation）事件">处理方向（<span style="font-size: 2.14285714285714rem;">orientation</span><span style="font-size: 2.14285714285714rem;">）事件</span></h2>
+
+<p>要接收设备方向变化信息，只需要监听{{ event("deviceorientation") }}事件：</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong><a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.</p>
+</div>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true);
+</pre>
+
+<p>注册完事件监听处理函数后（对应这个例子中的<span style="background-color: rgba(234, 239, 242, 0.247059); font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 1rem; line-height: 19px; white-space: pre;">handleOrientation</span><span style="line-height: 1.5;">），监听函数会定期地接收到最新的设备方向数据。</span></p>
+
+<p>方向事件对象中包含四个值：</p>
+
+<p>{{ domxref("DeviceOrientationEvent.absolute") }}</p>
+
+<p>{{ domxref("DeviceOrientationEvent.alpha") }}</p>
+
+<p>{{ domxref("DeviceOrientationEvent.beta") }}</p>
+
+<p>{{ domxref("DeviceOrientationEvent.gamma") }}</p>
+
+<p>下面是一个事件处理函数的例子：</p>
+
+<pre class="brush: js">function handleOrientation(orientData) {
+  var absolute = orientData.absolute;
+  var alpha = orientData.alpha;
+  var beta = orientData.beta;
+  var gamma = orientData.gamma;
+
+  // Do stuff with the new orientation data
+}
+</pre>
+
+<h3 id="相关值解释">相关值解释</h3>
+
+<p>关于每一个轴的记录值表示的是相对于标准的坐标系，设备在某一个给定轴上的旋转量。<a href="https://developer.mozilla.org/en-US/DOM/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="Orientation and motion data explained">Orientation and motion data explained</a><span style="line-height: 1.5;"> 这篇文章有更详细的描述，下面是对这篇文章的总结。</span></p>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent.alpha") }} 表示设备沿z轴上的旋转角度，范围为0~360。</li>
+ <li>{{ domxref("DeviceOrientationEvent.beta") }} 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。</li>
+ <li>{{ domxref("DeviceOrientationEvent.gamma") }} 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。</li>
+</ul>
+
+<h3 id="例子">例子</h3>
+
+<p>这个例子会成功运行在支持检测自己方向的设备中的支持{{event("deviceorientation")}} 事件的浏览器中。</p>
+
+<p>让我们想象一下有一个球在花园<span style="line-height: 1.5;">中：</span></p>
+
+<pre class="brush: html  language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;</span>div</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>garden<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">&gt;</span></span>
+  <span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;</span>div</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>ball<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">&gt;</span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;/</span>div</span><span class="punctuation token" style="color: #999999;">&gt;</span></span>
+<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;/</span>div</span><span class="punctuation token" style="color: #999999;">&gt;</span></span>
+
+<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;</span>pre</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>output<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">&gt;</span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;">&lt;/</span>pre</span><span class="punctuation token" style="color: #999999;">&gt;</span></span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<p><span style="line-height: 1.5;">花园只有200px宽（很小对吧），球在中央：</span></p>
+
+<pre class="brush: css  language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">.garden </span><span class="punctuation token" style="color: #999999;">{</span>
+  <span class="property token" style="color: #990055;">position</span><span class="punctuation token" style="color: #999999;">:</span> relative<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">width</span> <span class="punctuation token" style="color: #999999;">:</span> 200px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 200px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">border</span><span class="punctuation token" style="color: #999999;">:</span> 5px solid #CCC<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">border-radius</span><span class="punctuation token" style="color: #999999;">:</span> 10px<span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+
+<span class="selector token" style="color: #669900;">.ball </span><span class="punctuation token" style="color: #999999;">{</span>
+  <span class="property token" style="color: #990055;">position</span><span class="punctuation token" style="color: #999999;">:</span> absolute<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">top</span>   <span class="punctuation token" style="color: #999999;">:</span> 90px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">left</span>  <span class="punctuation token" style="color: #999999;">:</span> 90px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">width</span> <span class="punctuation token" style="color: #999999;">:</span> 20px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 20px<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">background</span><span class="punctuation token" style="color: #999999;">:</span> green<span class="punctuation token" style="color: #999999;">;</span>
+  <span class="property token" style="color: #990055;">border-radius</span><span class="punctuation token" style="color: #999999;">:</span> 100%<span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 247px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 266px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 285px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 304px; background: 0px 0px;"></div>
+
+<p><span style="line-height: 1.5;">现在，如果我们移动设备，球将随之移动：</span></p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> ball   <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.ball'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> garden <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.garden'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> output <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.output'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="keyword token" style="color: #0077aa;">var</span> maxX <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> garden<span class="punctuation token" style="color: #999999;">.</span>clientWidth  <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> ball<span class="punctuation token" style="color: #999999;">.</span>clientWidth<span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> maxY <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> garden<span class="punctuation token" style="color: #999999;">.</span>clientHeight <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> ball<span class="punctuation token" style="color: #999999;">.</span>clientHeight<span class="punctuation token" style="color: #999999;">;</span>
+
+<span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">handleOrientation<span class="punctuation token" style="color: #999999;">(</span></span>event<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
+  <span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> event<span class="punctuation token" style="color: #999999;">.</span>beta<span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // In degree in the range [-180,180]
+</span>  <span class="keyword token" style="color: #0077aa;">var</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> event<span class="punctuation token" style="color: #999999;">.</span>gamma<span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // In degree in the range [-90,90]
+</span>
+  output<span class="punctuation token" style="color: #999999;">.</span>innerHTML  <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"beta : "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"\n"</span><span class="punctuation token" style="color: #999999;">;</span>
+  output<span class="punctuation token" style="color: #999999;">.</span>innerHTML <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"gamma: "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"\n"</span><span class="punctuation token" style="color: #999999;">;</span>
+
+ <span class="comment token" style="color: #708090;"> // Because we don't want to have the device upside down
+</span> <span class="comment token" style="color: #708090;"> // We constrain the x value to the range [-90,90]
+</span>  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">&gt;</span>  <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span>  <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+  <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">&lt;</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span><span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span><span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span>
+
+ <span class="comment token" style="color: #708090;"> // To make computation easier we shift the range of
+</span> <span class="comment token" style="color: #708090;"> // x and y to [0,180]
+</span>  x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">;</span>
+  y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">;</span>
+
+ <span class="comment token" style="color: #708090;"> // 10 is half the size of the ball
+</span> <span class="comment token" style="color: #708090;"> // It center the positioning point to the center of the ball
+</span>  ball<span class="punctuation token" style="color: #999999;">.</span>style<span class="punctuation token" style="color: #999999;">.</span>top  <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">(</span>maxX<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">/</span><span class="number token" style="color: #990055;">180</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"px"</span><span class="punctuation token" style="color: #999999;">;</span>
+  ball<span class="punctuation token" style="color: #999999;">.</span>style<span class="punctuation token" style="color: #999999;">.</span>left <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">(</span>maxY<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span>y<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">/</span><span class="number token" style="color: #990055;">180</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"px"</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="punctuation token" style="color: #999999;">}</span>
+
+window<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">addEventListener<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'deviceorientation'</span><span class="punctuation token" style="color: #999999;">,</span> handleOrientation<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 247px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 266px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 285px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 304px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 323px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 342px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 361px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 380px; background: 0px 0px;">
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 399px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 418px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 437px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 456px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 475px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 494px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 513px; background: 0px 0px;"></div>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 551px; background: 0px 0px;"></div>
+</div>
+
+<p>输出结果:</p>
+
+<p>在{{LiveSampleLink("Orientation_example", "这里")}}以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。</p>
+
+<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div>
+
+<div class="warning" style="font-size: 14px;">
+<p><strong>警告:</strong> Chrome 和 Firefox 处理角度的机制不同，所以某些轴上的方向是相反的。</p>
+</div>
+
+<h2 id="处理移动（motion）事件" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">处理移动（motion）事件</h2>
+
+<p><span style="line-height: 1.5;">移动事件的处理跟方向事件是一样的，除了他们有自己的事件名：{{ event("devicemotion") }}</span></p>
+
+<pre class="brush: js  language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">window<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">addEventListener<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"devicemotion"</span><span class="punctuation token" style="color: #999999;">,</span> handleMotion<span class="punctuation token" style="color: #999999;">,</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
+
+<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
+
+<p><span style="line-height: 1.5;">真正不同的是做为参数传递给</span><em>HandleMotion函数的</em><span style="line-height: 1.5;">{{ domxref("DeviceMotionEvent") }}对象所包含的信息。</span></p>
+
+<p>这个对象包含四个属性：</p>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li>
+ <li>{{ domxref("DeviceMotionEvent.interval") }}</li>
+</ul>
+
+<h3 id="相关值解释_2" style="line-height: 24px; font-size: 1.71428571428571rem;">相关值解释</h3>
+
+<p><span style="line-height: 1.5;">{{ domxref("DeviceMotionEvent") }}对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。（</span><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a><span style="line-height: 1.5;">有更详细的说明。）</span></p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.acceleration" title="The acceleration property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2)."><code>acceleration</code></a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.accelerationIncludingGravity" title="The accelerationIncludingGravity property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2). Unlike DeviceMotionEvent.acceleration which does not compensate for the influence of gravity, its value is the sum of the acceleration of the device as induced by the user and the acceleration caused by gravity."><code>accelerationIncludingGravity</code></a>，都包含下面三个轴：</p>
+
+<ul>
+ <li><code>x</code>: 西向东</li>
+ <li><code>y</code>: 南向北</li>
+ <li><code>z</code>: 垂直地面</li>
+</ul>
+
+<p>对于 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.rotationRate" title="Returns the rate at which the device is rotating around each of its axes in degrees per second.">rotationRate</a></code> ，情况有点不同；三个轴的信息对应着以下三种情况：</p>
+
+<ul>
+ <li><code>alpha</code>: 设备沿着垂直于屏幕（对于桌面设备则是垂直于键盘）的轴的旋转速率</li>
+ <li><code>beta</code>: 设备沿着屏幕（对于桌面设备则是键盘）左至右方向的轴的旋转速率(桌面设备相对于键盘)</li>
+ <li><code>gamma</code>: 设备沿着屏幕（对于桌面设备则是键盘）下至上方向的轴的旋转速率</li>
+</ul>
+
+<p>最后，<a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.interval" style="line-height: 1.5;" title="Returns the interval, in milliseconds, at which data is obtained from the underlaying hardware. You can use this to determine the granularity of motion events."><code>interval</code></a><span style="line-height: 1.5;"> 表示的是从设备获取数据的间隔时间，单位是毫秒。</span></p>
+
+<h2 id="规范" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
+
+<h3 id="DeviceMotionEvent"><code>DeviceMotionEvent</code></h3>
+
+<p>{{Compat("api.DeviceMotionEvent")}}</p>
+
+<h3 id="DeviceOrientationEvent"><code>DeviceOrientationEvent</code></h3>
+
+<p>{{Compat("api.DeviceOrientationEvent")}}</p>
+
+<h2 id="参见" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">参见</h2>
+
+<ul>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>The legacy <code><a href="https://developer.mozilla.org/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li>
+</ul>
diff --git a/files/zh-cn/web/events/mutation_events/index.html b/files/zh-cn/web/events/mutation_events/index.html
new file mode 100644
index 0000000000..732cb7614b
--- /dev/null
+++ b/files/zh-cn/web/events/mutation_events/index.html
@@ -0,0 +1,63 @@
+---
+title: Mutation events
+slug: orphaned/Web/Guide/Events/Mutation_events
+translation_of: Web/Guide/Events/Mutation_events
+original_slug: Web/Guide/Events/Mutation_events
+---
+<p>{{deprecated_header()}}</p>
+
+<p><strong>Mutation 事件 </strong>为web页面提供一种机制或扩展，以便在DOM被改变时获得通知。<span style="background-color: #ffff00;">如果可能请用<a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>代替。</span></p>
+
+<h2 id="前言">前言</h2>
+
+<p id="Replacement.3A_mutation_observers">这个 mutation 事件在<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events 标准</a> 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a> 的</span>"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" <span id="to">)</span>. </p>
+
+<p><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>中。</p>
+
+<p>避免用mutation事件的实际原因是<strong>性能问题</strong>和<strong>跨浏览器支持</strong>。</p>
+
+<h3 id="性能">性能</h3>
+
+<p>为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能（慢1.5 - 7倍），此外, 移除监听器不会逆转的损害。</p>
+
+<p>性能好坏 <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">限制了文档拥有mutation事件监听</a>.</p>
+
+<h3 id="跨浏览器支持">跨浏览器支持</h3>
+
+<p>这些事件在不同的浏览器实现并不一致, 例如:</p>
+
+<ul>
+ <li>IE9之前的版本不支持mutation 事件而且在IE9版本中没有正确实现其中某些事件(<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">例如, DOMNodeInserted</a>)</li>
+ <li>WebKit 不支持 DOMAttrModified (见 <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> 和 <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li>
+ <li>"mutation name events", i.e. DOMElementNameChanged 和 DOMAttributeNameChanged 在Firefox中不被支持 (到 version 11), 可能其他浏览器也是这样.</li>
+ <li>...</li>
+</ul>
+
+<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">documents browser support for mutation events</a>.</p>
+
+<h2 id="Mutation_事件列表">Mutation 事件列表</h2>
+
+<p>下面是所有 mutation 事件列表, <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a> 中定义的:</p>
+
+<ul>
+ <li><code>DOMAttrModified</code></li>
+ <li><code>DOMAttributeNameChanged</code></li>
+ <li><code>DOMCharacterDataModified</code></li>
+ <li><code>DOMElementNameChanged</code></li>
+ <li><code>DOMNodeInserted</code></li>
+ <li><code>DOMNodeInsertedIntoDocument</code></li>
+ <li><code>DOMNodeRemoved</code></li>
+ <li><code>DOMNodeRemovedFromDocument</code></li>
+ <li><code>DOMSubtreeModified</code></li>
+</ul>
+
+<h2 id="使用">使用</h2>
+
+<p>你可以如下所示使用<a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a> 注册一个mutation 事件监听器:</p>
+
+<pre><code>element.addEventListener("DOMNodeInserted", function (ev) {</code>
+  // ...
+<code>}, false);</code>
+</pre>
+
+<p>事件对象在 {{ domxref("MutationEvent") }}传递给监听器 (见 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">its definition in the specification</a>) 对于大多数的事件, 和 {{ domxref("MutationNameEvent") }} 用于 <code>DOMAttributeNameChanged</code> and <code>DOMElementNameChanged</code>.</p>
diff --git a/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html
new file mode 100644
index 0000000000..97e52cd168
--- /dev/null
+++ b/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html
@@ -0,0 +1,52 @@
+---
+title: Orientation 和 motion 数据解释
+slug: Web/Events/Orientation_and_motion_data_explained
+translation_of: Web/Events/Orientation_and_motion_data_explained
+tags:
+  - Intermediate
+  - Mobile
+  - Motion
+  - NeedsContent
+  - Orientation
+  - páginas_a_traducir
+  - rotation
+---
+<p>{{ Draft() }}</p>
+<h2 id="总言" style="line-height: 30px; font-size: 2.14285714285714rem;">总言</h2>
+<p>当我们要使用orientation和motion事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。</p>
+<div class="warning" style="font-size: 14px;">
+ <p><strong>警告:</strong> 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.</p>
+</div>
+<h2 id="坐标系" style="line-height: 30px; font-size: 2.14285714285714rem;">坐标系</h2>
+<p>坐标系是一种描述物体位置的系统，它包含三个轴(X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。</p>
+<h3 id="地球坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">地球坐标系</h3>
+<p>地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。</p>
+<ul>
+ <li>X轴沿着地平面，垂直于Y轴，向东为正，向西为负。</li>
+ <li>Y轴沿着地平面，向北(北极，不是磁场北)为正，向南为负。</li>
+ <li>Z轴垂直于地平面，想象成一条线连接着设备跟地心。背对地心的方向为正，指向地心的方向为负。</li>
+</ul>
+<h3 id="设备坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">设备坐标系</h3>
+<p>设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。</p>
+<p>,<img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png"></p>
+<ul>
+ <li>x轴沿着屏幕表面，向右为正，向左为负。</li>
+ <li>y轴沿着屏幕表面，向上为正，向下为负。</li>
+ <li>z轴垂直屏幕表面或键盘，远离屏幕的方向为正。</li>
+</ul>
+<div class="note">
+ <span style="line-height: 1.5;">注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用</span><span style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">orientationchange事件。</span></div>
+<h2 id="旋转(Rotation)" style="line-height: 30px; font-size: 2.14285714285714rem;">旋转(Rotation)</h2>
+<p>旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。</p>
+<h3 id="Alpha" style="line-height: 24px; font-size: 1.71428571428571rem;">Alpha</h3>
+<p>围绕z轴旋转设备将使alpha角度值发生变化:</p>
+<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png"></p>
+<p><span style="line-height: 1.5;">alpha为</span><span style="line-height: 1.5;">0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。</span></p>
+<h3 id="Beta" style="line-height: 24px; font-size: 1.71428571428571rem;">Beta</h3>
+<p>围绕x轴旋转，也就是前后旋转，将使beta值发生改变:</p>
+<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p>
+<p><span style="line-height: 1.5;">当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到</span><span style="line-height: 1.5;">180°，向后翻转递减到-180°。</span></p>
+<h3 id="Gamma" style="line-height: 24px; font-size: 1.71428571428571rem;">Gamma</h3>
+<p><span style="line-height: 1.5;">当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:</span></p>
+<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p>
+<p><span style="line-height: 1.5;">gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到</span><span style="line-height: 1.5;">90° ，向左翻转时，递减到-90°。</span></p>