0
在學校的項目上工作，我試圖用加速度計滾動網頁。使用iPhone的加速度計滾動網頁
我希望能夠滾動到頁面的頂部和底部。這通過傾斜iPhone。
我使用Cordova作爲libirarie來訪問加速度計。
但我卡住了。
我得到所有的時間uncaught類型錯誤，所以我沒有得到的加速度計的值。
而另一個問題是，我不知道如何使用加速度計的值並將其用於在網頁上滾動。
<header class="meta">
<h1><i class="fa fa-flask"></i> Use a sensor</h1>
</header>
<main>
<div class="container">
<section data-route="some-section" class="front-panel">
<article>
<header>
<h1>Instructions</h1>
</header>
<div id="accelerometer">Waiting for accelerometer...</div>
</article>
</section>
<section data-route="some-other-section" class="back-panel">
<figure>
<img src="media/some-other-picture.jpg" alt="a picture">
</figure>
<header>
<h1>Some other section</h1>
</header>
<article>
<header>
<h1>
Some other article
</h1>
</header>
</article>
</section>
</div>
</main>
<footer class="meta">
<nav>
<ul>
<li><a href="#/some-section"><i class="fa fa-hand-o-left"></i></a></li>
<li><a href="#/some-other-section"><i class="fa fa-hand-o-right"></i></a></li>
</ul>
</nav>
</footer>
<script src="cordova.js"></script>
<script src="static/js/vendor/routie.min.js"></script>
<script src="static/js/script.js"></script>
//self-invoking anonymous function
（函數（）{ '使用嚴格';
var scrollTop = document.body.scrollTop,
el = document.body,
els = document.querySelectorAll('.meta'),
position = el.scrollTop,
oHeight = el.offsetHeight,
wHeight = window.innerHeight,
$, $$;
//initialize app with an controller object literal
var app = {
//init method, Cordova is ready to be used
init: function() {
this.router();
accelerometer.begin();
document.addEventListener('gesturechange', this, false);
document.addEventListener('scroll', this, false);
},
router: function() {
routie({
'/some-section': function() {
section.toggle('some-section');
},
'/some-other-section': function(route) {
section.toggle('some-other-section');
}
});
},
handleEvent: function(e) {
var scroll = el.scrollTop,
i = 0,
l = els.length;
if (scroll > position && (scroll + wHeight) < oHeight && position > 0) {
// scrolling Down
for (;i < l;i++) {
els[i].classList.add('shrink');
};
} else {
// scrolling Up
for (;i < l;i++) {
els[i].classList.remove('shrink');
};
}
position = scroll;
},
};
var section = {
toggle: function(route) {
var panel = $('[data-route='+ route +']'),
front = /front-panel/.test(panel.className);
this.fp = $('.front-panel');
this.bp = $('.back-panel');
this.bp.addEventListener('webkitTransitionEnd',this,false)
if(!(panel == this.fp)){
this.fp.classList.add('out');
this.bp.classList.remove('back-panel');
this.bp.classList.add('front-panel');
} else {
// to do: active navigation
}
},
handleEvent: function() {
this.fp.classList.remove('out','front-panel');
this.fp.classList.add('back-panel');
}
};
// utilities object for common thingies
var utils = {
init: function() {
// Shorthand selectors
$ = this.selectElement,
$$ = this.selectElements;
},
selectElement: function(el) {
return document.querySelector(el);
},
selectElements: function(el) {
return document.querySelectorAll(el);
}
};
var accelerometer = {
begin: function() {
//update accleration every 100 of a second
var options = {
frequency: 100
};
watchID = navigator.accelerometer.watchAcceleration(this.success, debug.fail, options);
},
// Stop watching the acceleration
stop: function() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
},
// onSuccess: Get a snapshot of the current acceleration
success: function (acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />'+
'Acceleration Y: ' + acceleration.y + '<br />'+
'Acceleration Z: ' + acceleration.z + '<br />'+
'Timestamp: ' + acceleration.timestamp + '<br />';
}
};
var debug = {
fail: function() {
alert('onError!');
}
};
utils.init();
app.init();
}）（）;
任何幫助將會很棒！
甚至沒有開始接近OP的問題。 –