ここではjQueryのプラグインBigVideoで背景を動画にする方法を紹介しています。

デモはこちら
https://office-goto.info/demo/bigvideo/
※音が出ます

ダウンロードはこちら
http://dfcb.github.io/BigVideo.js/

headで読み込み

<link rel="stylesheet" href="./css/bigvideo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="./js/video.js"></script>
<script src="./js/bigvideo.js"></script>

jquery,jquery-ui,video.jsは別に用意する必要があります。

jquery,jquery-ui
https://developers.google.com/speed/libraries/devguide
video.js
http://www.videojs.com/

1つの動画を再生

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('vids/vid.mp4');
});

複数の動画を順番に再生

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});

クリックで動画を再生

var BV = new $.BigVideo();
BV.init();
$(function() {
    $('.playlist-btn').on('click', function(e) {
        e.preventDefault();
        BV.show($(this).attr('href'));
    });
});

<a href="vids/vid.mp4" class="playlist-btn">video</a>

一時停止

BV.getPlayer().pause();

これで背景に動画を再生できます。
必要に応じてz-indexなどでコンテンツの表示を設定してください。

ここではsetIntervalとclearIntervalで定期的に処理を実行する方法について解説しています。

Sample

$(function(){
    setInterval("foo()",3000);
});

function foo() {
    alert("3秒間隔で表示されるアラート");
}

例ではfoo()をsetIntervalで3秒毎に呼び出しています。
setIntervalの秒数の単位はミリ秒で設定してください。

停止

/* タイマーオブジェクト */
var timer = null;
var n = 3;

$(function(){
    timer = setInterval("foo()",3000);
});

function foo() {
    alert("3秒間隔で表示されるアラート");
    n--;
    if (n == 0) {
        clearInterval(timer);
    }
}

例では3秒毎に表示させているアラートを3回で停止させています。

停止するにはclearIntervalを使います。
停止させたい場合setIntervalで返すオブジェクトをclearIntervalに渡すことで停止させることができます。

ここではjQueryを使って何秒後に処理を遅らせて実行する方法について解説しています。

$(function(){
    setTimeout(function(){
        alert("1秒後に表示されるアラート");
    },1000);
});

jqueryで囲んでありますがJavascriptでもsetTimeoutは使えるので便利です。
遅らせる時間についてはミリ秒で指定してください。

ここではマウスオーバーで画像にキャプションを表示するプラグインmosaicを紹介しています。

ダウンロードはこちら
http://buildinternet.com/project/mosaic/

デモはこちら
https://office-goto.info/demo/mosaic/

読み込むファイル

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

Circleの場合の読み込み
css

<style type="text/css">
    .mosaic-block {
    	float:left;
    	position:relative;
    	overflow:hidden;
    	width:400px;
    	height:250px;
    	margin:10px;
    	background:#111 url(img/progress.gif) no-repeat center center;
    	border:1px solid #fff;
    	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    }
    .mosaic-backdrop {
    	display:none;
    	position:absolute;
    	top:0;
    	height:100%;
    	width:100%;
    	background:#111;
    }
    
    .mosaic-overlay {
    	display:none;
    	z-index:5;
    	position:absolute;
    	width:100%;
    	height:100%;
    	background:#111;
    }
    .circle .mosaic-overlay {
    	background:url(img/hover-magnify.png) no-repeat center center;
    	opacity:0;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    	filter:alpha(opacity=00);
    	display:none;
    }
</style>

js

<script type="text/javascript">
    $(function(){
        $('.circle').mosaic({
    		opacity : 0.8  // オーバーレイ用不透明 (0-1)
    	});
    });
</script>

html

<!--Circle-->
<div class="mosaic-block circle">
    <a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay">&nbsp;</a>
    <div class="mosaic-backdrop"><img src="img/mosaic.jpg"/></div>
</div>

他にFade、Bar、Bar2、Bar3、Cover、Cover2、Cover3があるので必要な箇所を読み込んでください。

※AjaxZip3.0の記事があります。
関連記事
jQuery 郵便番号から住所を自動入力 AjaxZip3.0
https://office-goto.info/javascript-jquery/ajaxzip3-0/

ここでは郵便番号から住所を自動入力してくれるAjaxZip2.0の紹介をしていきます。

デモはこちら
https://office-goto.info/demo/ajaxzip2/

AjaxZip2.0のダウンロード
http://www.kawa.net/works/ajax/ajaxzip2/ajaxzip2.html

head内で読み込み

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="ajaxzip2/ajaxzip2.js"></script>

ajaxzip2.jsを読み込んでください。

html

郵便番号
<input type="text" name="pos1" style="width:50px; ime-mode:disabled;" />
&nbsp;-&nbsp;
<input type="text" name="pos2" style="width:50px; ime-mode:disabled;" onKeyUp="AjaxZip2.zip2addr('pos1','pref','city','pos2');"/>
都道府県
<select name="pref">
    <option value="">--</option>
    <option value='北海道'>北海道</option><option value='青森県'>青森県</option>
    <option value='岩手県'>岩手県</option><option value='宮城県'>宮城県</option>
    <option value='秋田県'>秋田県</option><option value='山形県'>山形県</option>
    <option value='福島県'>福島県</option><option value='茨城県'>茨城県</option>
    <option value='栃木県'>栃木県</option><option value='群馬県'>群馬県</option>
    <option value='埼玉県'>埼玉県</option><option value='千葉県'>千葉県</option>
    <option value='東京都'>東京都</option><option value='神奈川県'>神奈川県</option>
    <option value='新潟県'>新潟県</option><option value='富山県'>富山県</option>
    <option value='石川県'>石川県</option><option value='福井県'>福井県</option>
    <option value='山梨県'>山梨県</option><option value='長野県'>長野県</option>
    <option value='岐阜県'>岐阜県</option><option value='静岡県'>静岡県</option>
    <option value='愛知県'>愛知県</option><option value='三重県'>三重県</option>
    <option value='滋賀県'>滋賀県</option><option value='京都府'>京都府</option>
    <option value='大阪府'>大阪府</option><option value='兵庫県'>兵庫県</option>
    <option value='奈良県'>奈良県</option><option value='和歌山県'>和歌山県</option>
    <option value='鳥取県'>鳥取県</option><option value='島根県'>島根県</option>
    <option value='岡山県'>岡山県</option><option value='広島県'>広島県</option>
    <option value='山口県'>山口県</option><option value='徳島県'>徳島県</option>
    <option value='香川県'>香川県</option><option value='愛媛県'>愛媛県</option>
    <option value='高知県'>高知県</option><option value='福岡県'>福岡県</option>
    <option value='佐賀県'>佐賀県</option><option value='長崎県'>長崎県</option>
    <option value='熊本県'>熊本県</option><option value='大分県'>大分県</option>
    <option value='宮崎県'>宮崎県</option><option value='鹿児島県'>鹿児島県</option>
    <option value='沖縄県'>沖縄県</option>
</select>
市区町村
<input type="text" name="city" />
番地等
<input type="text" name="address" />

解説

onKeyUp=”…” (4行目)
表示させるinputタグのnameで指定します。
このサンプルでは郵便番号を2つのフィールドで分けていますので、第1、第4引数にpos1、pos2と指定しています。
郵便番号のフィールドを分けない場合は第1引数にthisを指定してください。