CSSの制御

リンク付きスライダー


＜HTML＞
使いたい場所に
<div id="loopslider">
<ul>
	<li><a href="#"><img src="img/photo01.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo02.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo03.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo04.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo05.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo06.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo07.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo08.jpg" alt="" /></a></li>
	<li><a href="#"><img src="img/photo09.jpg" alt="" /></a></li>
</ul>
</div><!--/#loopslider-->



＜CSS＞
体裁
#loopslider {
	margin: 0 auto;
	width: 1100px;
	height: 350px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
/*	width: 100%;*/
	height: 350px;
	float: left;
	display: inline;
	overflow: hidden;
}
#loopslider ul li {
	width: 450px;
	height: 350px;
	float: left;
	display: inline;
	overflow: hidden;
}


/* =======================================
	ClearFixElements
======================================= */
#loopslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#loopslider ul {
	display: inline-block;
	overflow: hidden;
}


＜JavaScript＞
//TOP画面のスライダー
$(function(){
	$('#loopslider').each(function(){
		var loopsliderWidth = $(this).width();
		var loopsliderHeight = $(this).height();
		$(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');

		var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
		var listCount = $('#loopslider_wrap').children('ul').children('li').length;

		var loopWidth = (listWidth)*(listCount);

		$('#loopslider_wrap').css({
			top: '0',
			left: '0',
			width: ((loopWidth) * 2),
			height: (loopsliderHeight),
			overflow: 'hidden',
			position: 'absolute'
		});

		$('#loopslider_wrap ul').css({
			width: (loopWidth)
		});
		loopsliderPosition();

		function loopsliderPosition(){
			$('#loopslider_wrap').css({left:'0'});
			$('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},125000,'linear');
			setTimeout(function(){
				loopsliderPosition();
			},125000);
		};

		$('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
	});
});

125000数字は流れる速度。多いとゆっくりになる。早い25000くらいか。

▲このページのTOPに戻る▲

ページトップに戻るをスクロールしたら表示させる方法


＜HTML＞
使いたい場所に
<div id="page-top">
	<p><a id="move-page-top">▲</a></p>
</div>



＜CSS＞
体裁
#page-top{
  width:50px;
  height:50px;
  position:fixed;
  right:16px;
  bottom:16px;
  display:none;
}
  
#page-top p{
  margin:0;
  padding:0;
  text-align:center;
  background:#3b3b3b;
}
  
#page-top p:hover{
  background:#8b8b8b;
  -webkit-transition:all 0.3s;
  -moz-transition:all 0.3s;
  transition:all 0.3s;
}
  
#page-top p a{
  color:#fff;
  line-height:50px;
  text-decoration:none;
  display:block;
  cursor:pointer;
}


＜JavaScript＞
$(function(){
  $(window).scroll(function(){
    //最上部から現在位置までの距離を取得して、変数[now]に格納
    var now = $(window).scrollTop();
 
    //最下部から現在位置までの距離を計算して、変数[under]に格納
    var under = $('body').height() - (now + $(window).height());
 
    //最上部から現在位置までの距離(now)が1500以上かつ
    //最下部から現在位置までの距離(under)が200px以上だったら
    if(now > 200 && under > 200){
      //[#page-top]をゆっくりフェードインする
      $('#page-top').fadeIn('slow');
    }
  });
 
  //ボタン(id:move-page-top)のクリックイベント
  $('#move-page-top').click(function(){
    //ページトップへ移動する
    $('html,body').animate({scrollTop:0},'slow');
  });
});

▲このページのTOPに戻る▲

確認ダイヤログ


$(function(){
	$("#dialogButton").click(function(){
		/* 必要なときに、必要なdiv要素を生成して、利用する */
		var x = $("").dialog({autoOpen:false});
		/* ダイアログの中身は、どこかから取ってきたり、べた書きしたり */
		x.html("ダイアログの中身");
		/* ダイアログのオプションを設定して */
		x.dialog("option", {
			title: "ダイアログのタイトル",
			width:600,
			height:400,
			buttons: {
				"必要ならボタン類も": function() { $(this).dialog("close"); },
				"追加できる": function() { $(this).dialog("close"); }
			}
		});
		/* ダイアログを開きます */
		x.dialog("open");
	});
});


※別バージョン
上部にJavaScriptコードの利用のタグを入れる。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>


<script>
  $(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      draggable:false,
      closeOnEscape:false,
      width:380,
      height:200,
      modal: true,
      buttons: {
        "Yes": function() {
          $( this ).dialog( "close" );
        },
        No: function() {
          window.location.href='http://www.yahoo.co.jp/'
        }
      }
    });
  });
  </script>


<div id="dialog-confirm" title="年齢確認">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>あなたは18歳以上ですか？</p>
</div>

使い方一覧

▲このページのTOPに戻る▲