jQueryでコンテンツのスライド
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でスライドさせる、という仕組みみたい。
関連記事
-
-
imgタグとPHPでグラフ作成
プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...
-
-
jQueryのCSS変更
jQueryでCSSを触る際、 $("#aaa").css('height',' ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
画像アップロード前の時点で画像が選択されているか確認
やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...
-
-
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか？」「拡 ...
-
-
プラグインを使用せず、jQueryでオートページャー
プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...
-
-
画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...
-
-
Ajaxの負荷対策
Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...
-
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
- PREV
- $_SERVER['PHP_SELF']に脆弱性あり
- NEXT
- ファイルやクラス名等の命名規則