私がやろうとしているのは、ビューポート全体を生成する単純な html/css 水平スライダーを作成することです。
ユーザーのビューポートを計算し、特定の div に目的の幅/高さを与える JavaScript を既に取得していますが、ボタンを左右に目的のピクセル量でアニメーション化することができないようです。(getviewport.js で計算されます)
私は近くにいることを知っていますが、可変ビューポート幅をボタンに取得する方法がわかりません。
これは getviewport.js です
function resize() {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' & typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.getElementById("portfolio").style.height = viewportheight+"px";
document.getElementById("portfolio1").style.height = viewportheight+"px";
document.getElementById("portfolio2").style.height = viewportheight+"px";
document.getElementById("portfolio3").style.height = viewportheight+"px";
document.getElementById("portfolio1").style.width = viewportwidth+"px";
document.getElementById("portfolio2").style.width = viewportwidth+"px";
document.getElementById("portfolio3").style.width = viewportwidth+"px";
}
これは、アニメーションとボタンのスクリプトです。
<script language="javascript">
function slider_animate(px) {
$('#moving_part').animate({
'marginLeft' : px
});
}
</script>
<input type="button" value="Move Left" onclick="slider_animate('-=viewportwidth')" />
<input type="button" value="Move Right" onclick="slider_animate('+=viewportwidth')" />