jQuery cycle

jQueryスクリプトcycleを使ったバナー表示の例を示す。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script>$('#cycle').cycle({
  fx     : 'scrollLeft', // 右から左へ
  speed  : 100,  // 切り替え速度0.1秒
  timeout: 2000  // 切り替え待機時間2秒
});
</script>

<style>
#banner {
  position:relative;height:0;
  padding-bottom: 56.25%;
  }
#banner #cycle {
  position: absolute;
  top: 0; left: 0; border: 0;
  width: 100%;  height: 100%;
  }
</style>

<div id="banner">
  <div id="cycle">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
  </div>
</div>

• バナーの高さは #cycle スタイルで直接(px)または縦横比(%)を指定
  〔例〕HDサイズのとき padding:56.25%　縦横比が1:4のとき:25%;
• 同じ ID 名ではページ内で一つしか使えない。
  CLASS の場合は複数個所で使える。
• cycleプラグインはMicrosoft Ajax Content Delivery Networkを利用

tooltips

カーソルを重ねると説明あるいは画像が表示

同じ段落に二つ以上書けるようにした。

<i class="tips">項目<i>説明</i></i>

　項目1説明1 　項目2説明2 　項目3説明3

jQuery Script

Blogger管理ページの[テーマ]-{カストマイズ}-[HTMLの編集]で、追加修正スタイルとjQueryスクリプトを追加した。これにより投稿でjquery UIを記述できる。ここでは、<DL><DT><DD>タグを使ったトグルの例などを示す。▶の項目はHTML5 <details>を使った例である。

toggle

この部分が表示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(function () { $('.toggle').hover(function() {$(this).next('div').toggle(); },
 function(){ $(this).next('div').hide(); }); });</script>
<style>.toggle { cursor:default; } .hide { display: none; }</style>

<h3 class="toggle">toggle</h3>
<div class="hide">この部分が表示</div>

予告編

格子配置.grid

ソン・ジヒョ

(39歳)

ハン・ヒョジュ

(33歳)

ハ・ジウォン

(42歳)

キム・ユジョン

(20歳)

ナム・ジヒョン

(24歳)

ハン・イェリ

(35歳)

パク・シネ

(30歳)

ハン・ジミン

(37歳)

チャン・ナラ

(39歳)

CSS3 tooltips

<i class="tool">項目<i class="tips">説明</i></i>

　項目1 項目にカーソルを重ねるとここが表示 　項目2 同じ段落に二つ以上書けるようにした。 　項目3テキストの説明

JSカーソルを重ねると表示

※スマホではクリック

<script> $(function () { $('dl#toggle dt').hover(function() {$(this).next('dd').toggle(500); }, function(){ $(this).next('dd').toggle(500); }); });</script>

<dl id="toggle">
    <dt>項目1</dt>　<dd>説明１</dd>
    <dt>項目2</dt>　<dd>説明２</dd>
</dl>

項目1 - DT要素にカーソルを重ねるとDD要素が表示

項目2 - 再度重ねると非表示

説明2