2. 程式人生 > >圖片隨手機水平移動-陀螺儀。360度設定條件

圖片隨手機水平移動-陀螺儀。360度設定條件

阿新 • • 發佈：2019-01-06
// 全景圖-陀螺儀 var flag=true; var firstAngle = 0; var instance = 0; var tuoluo = false;//阻止事件監聽 function deviceorientation(wrap_translateX) { // 全景圖-陀螺儀 var flag = true; var firstAngle = 0; var instance = 0; if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', function
(event) { if (tuoluo) { var alpha = event.alpha, beta = event.beta, gamma = event.gamma; if (flag) { firstAngle = alpha; //記錄第一次值 flag = false; } var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / (2 * 90); //每一度移動距離
var translateZ = parseInt(Math.round(instance) * full_bgimgW) + wrap_translateX; var changeDeg90 = wrap_translateX / full_bgimgW; //初始，距離中心偏移度數 /*1.根據初始值firstAngle，角度位置判斷*/ if (firstAngle > 90 && firstAngle < 270) { /*2.根據偏移角度大於90度，判斷*/ if (alpha - firstAngle + changeDeg90 > 90
) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else if (alpha - firstAngle + changeDeg90 < -90) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else { if (alpha > firstAngle) { instance = Math.abs(alpha - firstAngle); } else { instance = alpha - firstAngle; } } } else if (firstAngle < 90 && firstAngle > 0) { /*根據alpha當前位置，225度為臨界點，判斷*/ if (alpha > firstAngle && alpha < 225) { if (alpha - firstAngle + changeDeg90 > 90) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else { instance = Math.abs(alpha - firstAngle); } } else if (alpha < firstAngle && alpha > 0) { if (alpha - firstAngle + changeDeg90 < -90) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else { instance = Math.abs(alpha - firstAngle) * (-1); } } else if (alpha < 360 && alpha > 225) { if ((alpha - 360 - firstAngle + changeDeg90) < -90) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else { instance = Math.abs(alpha - 360 - firstAngle) * (-1); } } } else if (firstAngle < 360 && firstAngle > 270) { /*根據alpha當前位置，135度為臨界點，判斷*/ if (alpha < firstAngle && alpha > 135) { if (alpha - firstAngle + changeDeg90 < -90) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width() * (-1)) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else { instance = Math.abs(alpha - firstAngle) * (-1); } } else if (alpha > firstAngle && alpha < 360) { if ((alpha - firstAngle + changeDeg90) > 90) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else { instance = Math.abs(alpha - firstAngle); } } else if (alpha < 135 && alpha > 0) { if ((360 - firstAngle + alpha + changeDeg90) > 90) { var full_bgimgW = ($(".full-bgimg").width() - $(window).width()) / 2; $(".p6fullView-wrap").css({ 'transform': 'translateX(' + full_bgimgW + 'px)' }); } else { instance = Math.abs(360 - firstAngle + alpha); } } } $(".full_bgimgW").html("初始度數：" + firstAngle + "當前度數：" + alpha + "距離中心偏離度數" + changeDeg90 + "偏移距離" + translateZ + "每一度px" + full_bgimgW) // $(".translateZ").html(translateZ); // if(instance > 0 && instance < 90){ $(".p6fullView-wrap").css({ 'transform': 'translateX(' + translateZ + 'px)' }) // } } }, false); } else { document.querySelector('body').innerHTML = '你的瀏覽器不支援陀螺儀'; } }

相關推薦

圖片隨手機水平移動-陀螺儀。360度設定條件

// 全景圖-陀螺儀 var flag=true; var firstAngle = 0; var instance = 0; var tuoluo = false;//阻止事件監聽 function deviceorientation(wrap_translateX) { // 全景圖-陀螺儀

科普：手機裡的陀螺儀到底是什麼

陀螺儀是一種感測器，這個東西在手機上主要是用來檢測手機姿態的，我們玩體感遊戲少不了它，一些手機拍

移動端二三事【四】：陀螺儀（重力感應器）實現手機位置、加速度感應以及常見應用。

效果 防止 size tro 通過 select 代碼 陀螺儀 prime 首先說明一下：陀螺儀感應需在真機環境下進行調試，PC端無效果。 1.獲取感應器 需在window上監聽devicemotion事件，再通過事件對象獲取accelerationIncludingG

移動端二三事【五】：陀螺儀（重力感應器）實現手機位置、加速度感應以及常見應用。

首先說明一下：陀螺儀感應需在真機環境下進行除錯，PC端無效果。 1.獲取感應器 需在window上監聽devicemotion事件，再通過事件物件獲取accelerationIncludingGravity（內建重力加速度感應器）物件。程式碼如下：

Unity 根據手機陀螺儀做UI動態旋轉移動的功能。像手遊崩壞3裡面流動的UI介面一樣

    玩過手遊崩壞3的應該會發現遊戲裡面的UI 介面還有一些場景 會根據 玩家手機的平衡狀態對UI或者相機進行位移或者旋轉。     今天我們要使用移動端的重力感應,做類似的效果，來增加UI介面的流動感.     其實就是通過移動端的重力感應獲

unity 移動端呼叫陀螺儀控制圖片移動！

using UnityEngine; using System.Collections; using UnityEngine.UI; //陀螺儀控制圖片移動 public class TuoLuoYi : MonoBehaviour { private const float lowPa

關於網頁隨手機比例縮放的問題。。。 移動前端開發之viewport的深入理解

在做適配手機版時，chrome調到手機版，但是還是顯示PC端的樣式，無法展現出手機端的樣式； 開始的時候還以為是chrome版本的問題，搜尋chrome版本無果； 想了下，按照道理chrome版本越新，功能應該更好用才是。 聯網搜尋並檢視一些手機版網頁的原始碼，發現很多大網站的手機版都有如下一句話：

H5如何做手機app(移動Web App)?圖片輪播？

tom 選擇 lan pre 自帶 ide pull oat css3 移動Web App 跨平臺開發 用戶不需要去賣場來下載安裝App 任何時候都可以發布App只需要一個開發項目 可以使用HTML5,CSS3以及JavaScript以及服務器端語言來完成（PHP,Ruby

【unity實用技能】unity3d 陀螺儀控制camera移動旋轉

無https://docs.unity3d.com/ScriptReference/Gyroscope.html unity 官方文檔就很清楚，只有一點要註意： 所有教程都教你怎麽用 input.gyro.attitude 但是這個表示的是空間中的位置，首先你是想做像王者榮耀開頭晃動攝像機的效果，需要把上個位

HTML5 控制手機陀螺儀

監聽deviceorientation window.addEventListener('deviceorientation', function(event) { var alpha = even

移動端中的陀螺儀

橫豎屏 　　window下的orientation屬性來表示移動端的橫豎屏狀態，chrome模擬器不支援該屬性，只能在真機上測試 window.orientation 　　按照上右下左的順序，該屬性的結果分別是0、90、180、-90 　　[注意]手機頭朝下的切換沒有實現 　　w

基於HTML5陀螺儀實現ofo首頁眼睛移動效果

最近用ofo小黃車App的時候，發現以前下方掃一掃變成了一個眼睛動的小黃人，覺得蠻有意思的，這裡用HTML5仿一下效果。 ofo眼睛效果 效果分析 從效果中不難看出，是使用陀螺儀事件實現的。 這裡先來看一下HTML5中陀螺儀事件的一些概念。

js 獲取手機平衡儀（陀螺儀）角度資訊

html5中的deviceorientation事件，此事件是檢測裝置方向變化時的事件。其常用屬性為alpha(x)、beta(y)、gamma(z)。 alpha：左右旋轉 beta：前後旋轉 g

html5如何獲取手機陀螺儀角度資訊

html5事件中，deviceorientation事件，此事件是檢測裝置方向變化時的事件。其常用屬性為alpha(x)、beta(y)、gamma(z)。 預設將手機垂直，且正面（90度）衝著自己

Unity3D中手機陀螺儀的使用

        使用手機陀螺儀，可以獲取手機的3D姿態，這在開發中是很有用的。當然現在的手機內建的陀螺儀都是比較廉價的，精度不高，但是作為實驗裝置看看效果還是可以的。本文將給出呼叫手機陀螺儀的簡單方法

EasyUI彈出框，隨滾動條移動 彈出圖片預覽自動縮略

隨滾動條移動 $(document).scroll(function () {         if (imgTemp != "") {             $("#divShowImage").dialog({ top: $(document).scrollTo

qt 實現label部件中的圖片隨滑鼠移動

最近在做圖片檢視器，所以研究了一下這個東西！ 首先給大家實現一下： 先在 .h 檔案定義四個函式： voidmousePressEvent(QMouseEvent*event);//按下滑鼠 voiddragEnterEvent(QDragEnterEvent*even

移動端上傳圖片--呼叫手機的相簿和相機

網上百度找到一個方法不錯，借鑑：程式碼如下 html: <div class="head"> <a class="btn-2"> <input type="file" accept="image/*" id="uplo

Unity3D 使用陀螺儀 檢查手機方向 設定固定的旋轉角度

namespace UnityEngine { public enum ScreenOrientation { Unknown = 0, Po

Unity實現對移動端的陀螺儀控制

using System.Collections; using System.Collections.Generic; using UnityEngine; public class GyroController : MonoBehaviour {