UNIRRY

WEBデザインとホロスコープと宇宙のブログ

マウスホイールに対応した固定エリアでのコンテンツ上下移動

fixedposition3

移動用リンクアイコンと疑似パララックス背景を追加した、中央配置のまま移動するコンテンツに、マウスホイールを追加したのでその追加部分だけまとめています。

この前のはこちら
ブラウザをリサイズしても中央固定配置のまま、コンテンツの中身だけ移動させる
移動リンク&背景疑似パララックスつき 中央配置で移動するコンテンツ

追加したのは、①マウスホイールを実装したいのでプラグインの読み込み ②マウスホイールの上下判別で処理を追加 です。

まずは、マウスホイール用のプラグインを読み込む

読み込むプラグインは、jquery.mousewheel.js

そういえば去年、同じようにマウスホイールのイベントをjsで普通にとるやり方をやったときに、ブラウザによって、読み取るマウスホイールの大きさにかなり差があったので、やっぱりプラグインを使用した方がここはいいのかなと思います。

<!-- js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

マウスホイール部分のjs

htmlとcss、jsのマウスホイール以外の部分は前回と全く同じです。
このプラグインではマウスホイールの移動した分だけ処理を実行するので、「.is(“:animated”)」でアニメートしていないものに対してのみ実行するようにして、1回制限をかけました。

// マウスホイール時、selecetdの操作とエリアを移動
$("body").mousewheel(function(event, delta, deltaX, deltaY) {
  // 1回制限にするためにアニメーションの判別
  if ( !cntinner.is(":animated") ) {
    // 下向き移動と上向き移動によって分岐
    if ( delta < 0) {
         if ( nav.children("li").eq(2).attr("class") !== "selected" ) {
			var navslect1 = nav.children("li").index(nav.children("li.selected")) + 1;
			nav.children("li").removeClass("selected");
			nav.children("li").eq(navslect1).addClass("selected");
			moveArea();
			var numb1 = nav.children("li").index(nav.children("li.selected"));
			motionArea(numb1);
		 }
    } else if (delta > 0) {
        if ( nav.children("li").eq(0).attr("class") !== "selected" ) {
			var navslect2 = nav.children("li").index(nav.children("li.selected")) - 1;
			nav.children("li").removeClass("selected");
			nav.children("li").eq(navslect2).addClass("selected");
			moveArea();
			var numb2 = nav.children("li").index(nav.children("li.selected"));
			motionArea(numb2);
	    }
	}	
    event.preventDefault();
    }
});

固定エリアでコンテンツを上下移動:マウスホイール対応のサンプル

サンプル

css3を使っているとこだけ四角くIEで見た目なっちゃってますが、js自体は問題なく動きます。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3