Если условие не работает с ориентацией устройства

Итак, ребята, я играю с ориентацией устройства. Вот это https://sublime.glitch.me/ Все прошло хорошо, кроме условия if. Если вы можете посмотреть веб-страницу на мобильном устройстве, вы увидите, что png перемещается в соответствии с ориентацией устройства.

Но я не хочу, чтобы он уходил с экрана, вот где мне нужно, если состояние. Я попытался сделать evt. ( функция ( b , o , i , l , e , r ) { b . GoogleAnalyticsObject = l ; b [ l ] || ( b [ l ] = function () {( b [ l ]. q = b [ l ] . д . || []) толкать ( аргументы )}); б [ 1 ]. l = + новая дата ; e = o . createElement ( i ); r = o . getElementsByTagName ( i ) [ 0 ]; e . src = '//www.google-analytics.com/analytics.js' ; r . parentNode . insertBefore ( e , r )} ( окно , документ , 'script' , 'ga' )); ga ( 'create' , 'UA-52746336-1' ); ga ( 'send' , 'pageview' ); var isCompleted = {}; function sampleCompleted ( sampleName ) { if ( ga && ! isCompleted . hasOwnProperty ( sampleName )) { ga ( 'send' , 'event' , 'WebCentralSample' , sampleName , 'completed' ); isCompleted [ sampleName ] = true ; } } var fixed = 2 ; var h5logo = document . getElementById ( "h5logo" ); var timestamp = document . getElementById ( "timestamp" ); var alpha = document . getElementById ( "alpha" ); var beta = document . getElementById ( «бета» ); var gamma = document . getElementById ( "гамма" ); / * // [START devori] * / if ( window . DeviceOrientationEvent ) { окно . addEventListener ( 'deviceorientation' , deviceOrientationHandler , false ); документ . getElementById ( "doeSupported" ). innerText = "" ; } / * // [END devori] * / var deviceOrientationData ; Функция deviceOrientationHandler ( ЭВТ ) { deviceOrientationData = ЭВТ ; попробуйте { timestamp . InnerText = новая Дата ( ЭВТ . TIMESTAMP ); alpha . innerText = evt . alpha . toFixed ( фиксированный ); бета . innerText = evt . бета . toFixed ( фиксированный ); гамма . innerText = evt . гамма . toFixed ( фиксированный ); if ( evt . gamma <- 35 ) { evt . gamma = - 35 } if ( evt . gamma > 35 ) { evt . gamma = 35 } var trans = "translate (" + (( evt . gamma + 20 ) * 2 ) + "px," + (( evt . бета - 90 ) * - 3 ) + "px)" ; h5logo . стиль . webkitTransform = trans ; h5logo . стиль . transform = trans ; } catch ( ex ) { document . getElementById ( "doeSupported" ). innerText = "NOT" ; } } не больше . h5logo { width : 40vh ; display : block ; margin-left : auto ; margin-right : auto ; позиция : абсолютная ; z = индекс : 10 ; } или меньше <! DOCTYPE html> <html lang = "en" > <head> <meta charset = "utf-8" > <meta http-equiv = "X-UA-Compatible" content = "IE = edge" > <meta name = "viewport" content = "width = device-width, initial-scale = 1" > <link rel = "stylesheet" href = "style.css" > <script defer src = "https: // code .getmdl.io / 1.2.1 / material.min.js " > . </ script> <style> body { margin : 2em ; } </ style> <title> ? </ title> </ head> <body> <div role = "main" class = "container" > <img src = "https://cdn.glitch.com/8da575e7-c6aa-48cb-bb49-3a708f8c28fc%2Fpreview .png? 1535142774062 « style = » display : block ; position : absolute ; margin-left : auto ; margin-right : auto ; z-index : - 2 " > <img id = " h5logo " src = " https: // cdn.glitch.com/8da575e7-c6aa-48cb-bb49-3a708f8c28fc%2Fhand.png?1535129311138 " class = " h5logo " > <h1 style = " position : absolute ; z-index : - 1 ; transform : rotate ( 90deg ) перевести ( 20% , - 60% ); " > возвышенное </ h1> <p> <b> alpha: </ b> <span id = " alpha " > </ span> <br> <b> beta: < / b> <span id = "beta" > </ span> <br> <b> gamma: </ b> <span id = "gamma" > </ span> <br> </ p> <p> < span id = "timestamp" > </ span> </ p> </ div> </ body> </ html> с условием if.

Но, по-видимому, у меня нет работы. Извините за мои плохие знания в области кодирования, я разработчик не разработчик, может кто-то, пожалуйста, помогите мне?

if(evt.gamma<-35){evt.gamma=-35}
if(evt.gamma>35){evt.gamma=35}
var trans = " translate("+ ((evt.gamma+20) * 2)+"px, "+ 
((evt.beta-90) * -3)+"px) " ;
gamma
-35

Строки, которые не работают, здесь, перевод работает отлично, только условие if. Большое спасибо, ребята.

35

javascript,html,html5,

0

Ответов: 1

0

Все свойства событий, в том числе gammaявляются только для чтения , так что вам нужно назначить -35и 35к новой переменной. См. Документацию .

Пример:

let newGamma = evt.gamma;

if(evt.gamma < -35){
  newGamma = -35;
}
else if(evt.gamma > 35){
  newGamma = 35;
}

var trans = " translate(" + ((newGamma + 20) * 2) + "px, " + ((evt.beta - 90) * -3) + "px) ";

Простейший пример, используя Mathметоды:

var trans = " translate(" + ((Math.min(Math.max(evt.gamma, -35), 35) + 20) * 2) + "px, " + ((evt.beta - 90) * -3) + "px) ";
JavaScript, HTML, html5,
Похожие вопросы
Яндекс.Метрика