更改圖像的設備方向jquery移動

所以我有一個任務做一個移動設計網站，我必須改變圖像，每次我傾斜設備。更改圖像的設備方向jquery移動

指令

在HTML文檔中創建4層，按照上述的實物模型，使用提供給您的圖像。這是一個手機網頁。我們提供了縱向和橫向取向的圖片資源。根據用戶的設備方向顯示正確的圖像。這個頁面的目的是允許用戶通過傾斜設備在層之間導航。例如：在BLUE頁面上將您的設備向左傾斜將您帶到GREEN頁面，並將其傾斜至右邊，您將進入YELLOW頁面。在層之間轉換時應該也會有淡化效果。

所以，我在想這樣的事情，但我的代碼並沒有真正的工作。請檢查下面的jsfiddle示例，謝謝。

HTML代碼

<div data-role="page"> 
    <div data-role="header"> 
    <h1>The orientationchange Event</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    </div> 

    <div data-role="footer"> 
    <h1>Footer Text</h1> 
    </div> 
</div>

Link

來源

2017-01-12 user7409024

如果你正在使用jQuery調整圖像大小，請嘗試使用CSS媒體查詢更快速，穩定的工藝來調整其大小，使用這樣的CSS：

@media screen and (orientation:portrait) { /*CSS for portrait*/ }

和

@media screen and (orientation:landscape) { /*CSS for landscape*/ }

不要忘了在放置css文件的鏈接標記上使用media =「screen」屬性，否則它將不起作用。或者，你可以在百分比或像素（在固定寬度的情況下）和高度設置爲自動，像這樣的最大寬度80％的圖像提供最大寬度的圖像。高度：自動;在屏幕大小調整或方向更改時避免圖像拉伸。

來源

2017-01-12 10:29:58 Abi

謝謝你的回答，我正在考慮做同樣的事情，但糾正我，如果我錯了，我想我只能爲每個方向選項（肖像，風景）1 img和在我的情況下，我需要他們在每個方向（左，右，直）都改變了，這就是爲什麼我有點困惑，並想使用jQuery的移動定位功能。 – user7409024

嗯，這不是那麼容易的。各種設備之間存在很多不一致。您可能需要切換到更好的方法。在不重新發明輪子的情況下，已經有一些用於傾斜和運動檢測的優秀庫。

只是作爲一個例子：在Full-Tilt被定義如下方向：

SCREEN_ROTATION_0  = 0 
SCREEN_ROTATION_90  = M_PI_2 
SCREEN_ROTATION_180  = M_PI 
SCREEN_ROTATION_270  = M_2_PI/3 
SCREEN_ROTATION_MINUS_90 = - M_PI_2

你可以得到的角度，然後更改相應的頁面。要測試compass示例，您需要一個真實的設備。

來源

2017-01-12 18:58:28 deblocker

更改圖像的設備方向jquery移動

回答

相關問題