勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQueryでコンテンツのスライド

      2014/05/19

jQueryもしくはJavaScriptでリンクを押すと
右から左にコンテンツをスライドさせたかった。

どうしたもんかなーと考えていたらデザイナーさんから、
こういった案はどうか? と貰ったのでメモ。

■ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<base href="http://aaa.com/" target="_self">
<meta http-equiv="content-type" content="text/html"/>
<meta cherset = "UTF-8">
<html lang="ja">
<head>
<title>タイトル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var window_width = -$(window).width();
function nextAdvance (num) {
$('.page' + num).css({'display':'none'});
    $('.page' + (num + 1))
        .css({'display':'inline-block', 'position':'absolute', 'top':0, 'right':window_width, 'opacity':1})
        .animate({'right': 0, 'left' : 0}, "hight");
}
</script>
</head>
<body>
<section class="page page1" style="top:0;left:0;right:0;position: absolute;">
aaaaa
<a href="javascript:;" class="btn1" onClick="return nextAdvance(1);" id="btn1">次へ進む</a>
</section>
<section class="page page2" style="display:none;">
bbb
<a href="javascript:;" class="btn2" onClick="return nextAdvance(2);" id="btn2">次へ進む</a>
</section>
<section class="page page3" style="display:none;">
ccc
</section>
</html>

■その他
縦長にコンテンツを作っておいて、不要なものはdisplay:none;で
見えなくしておく。

スライドさせる場合は見えているものを非表示にして、
見せたいものを表示した上で、一番右に配置する。

animateでスライドさせる、という仕組みみたい。

 - jQuery

  関連記事

jquery_logo
jQuery UI Datepickerで日本の祝祭日を表示

やりたかった事は、jQueryのカレンダーピッカーで 日本の祝祭日の色を変えると ...

jquery_logo
submit関連のjQuery

<?php //jQueryでのsubmit,エンターキーでのsubmit ...

jquery_logo
日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

jquery_logo
テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

jquery_logo
jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

jquery_logo
スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

jquery_logo
jQueryでセレクトメニューにcheckedをつける

セレクトメニュー(セレクトボックス)で特定の項目をデフォルトで選択しておきたかっ ...

jquery_logo
Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

jquery_logo
jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

jquery_logo
jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...