• web制作

入れておくと便利なjqueryまとめ

大和田
このエントリーをはてなブックマークに追加

サイト制作の時によく使われるテンプレ的な動きがあります。
とりあえずその機能が欲しい時やSPサイトなどで凝った動きが必要ない時に簡単で便利なjqueryをまとめていきます。

便利なjqueryまとめ

デモページを見ながらどうぞ
150409_demoimg

マウスをのせた時にうすくなる

<!-- html -->
<p><a href="#" class="hov"><img src="01.jpg"></a></p>
//script
$(function(){
	$('.hov').hover(
		function(){$(this).fadeTo(300, 0.6);},
		function(){$(this).fadeTo(300, 1.0);}
	);
});

参考:簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

a要素とか関係無くとりあえずクラスに[hov]を指定した物が透過されます。

マウスをのせた時に一瞬だけ光る

<!-- html -->
<p><a href="#" class="flash"><img src="01.jpg"></a></p>
//script
$(function(){
	$('.flash').hover(
		function(){$(this).fadeTo(0, 0.6).fadeTo('slow', 1.0);},
		function(){$(this).fadeTo('fast', 1.0);}
	);
});

参考:簡単に実装できる、ボタン画像のマウスオーバーイベント 10+

a要素とか関係無くとりあえずクラスに[flash]を指定した物が光ります。

マウスをのせた時に画像が切り替わる

※画像サイズが大きい場合、スマホでタッチした時に表示がおかしくなります。
※a要素で囲んだ時のみふわっと動きます。

<!-- html -->
<p><a href="#"><img src="01_off.jpg"></a></p>
//script
function smartRollover() {
	if(document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");

		for(var i=0; i < images.length; i++) {
			if(images[i].getAttribute("src").match("_off."))
			{
				images[i].onmouseover = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
				}
				images[i].onmouseout = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
				}
			}
		}
	}
}
if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}
new function(){
  function setRollOver2(){
    if(!document.images){return;}
    var imgs = document.images;
    var insert = [];
    for(var i=0;i<imgs.length;i++){
      var splitname = imgs[i].src.split('_off.');
      if((splitname[1])&&(imgs[i].parentNode.tagName=='A')){
        var rolloverImg = document.createElement('img');
        rolloverImg.src = splitname[0]+'_on.'+splitname[1];
        var alpha = 0;
        rolloverImg.currentAlpha = alpha;
        rolloverImg.style.opacity = alpha/100;
        rolloverImg.style.filter = 'alpha(opacity='+alpha+')';
        rolloverImg.style.position = 'absolute';
        addEvent(rolloverImg,'mouseover',function(){setFader(this,100);});
        addEvent(rolloverImg,'mouseout',function(){setFader(this,0);});
        insert[insert.length] = {position:imgs[i],element:rolloverImg};
      }
    }
    for(var i=0;i<insert.length;i++){
      var parent = insert[i].position.parentNode;
      parent.insertBefore(insert[i].element,insert[i].position);
    }
  }
  function setFader(targetObj,targetAlpha){
    targetObj.targetAlpha = targetAlpha;
    if(targetObj.currentAlpha==undefined){
      targetObj.currentAlpha = 100;
    }
    if(targetObj.currentAlpha==targetObj.targetAlpha){
      return;
    }
    if(!targetObj.fading){
      if(!targetObj.fader){
        targetObj.fader = fader;
      }
      targetObj.fading = true;
      targetObj.fader();
    }
  }
  function fader(){
    this.currentAlpha += (this.targetAlpha - this.currentAlpha)*0.2;
    if(Math.abs(this.currentAlpha-this.targetAlpha)<1){
      this.currentAlpha = this.targetAlpha;
      this.fading = false;
    }
    var alpha = parseInt(this.currentAlpha);
    this.style.opacity = alpha/100;
    this.style.filter = 'alpha(opacity='+alpha+')';
    if(this.fading){
      var scope = this;
      setTimeout(function(){fader.apply(scope)},30);
    }
  }
  function addEvent(eventTarget, eventName, func){
    if(eventTarget.addEventListener){
      eventTarget.addEventListener(eventName, func, false);
    }else if(window.attachEvent){
      // IE
      eventTarget.attachEvent('on'+eventName, function(){func.apply(eventTarget);});
    }
  }
  addEvent(window,'load',setRollOver2);
}

参考:フェードイン・アウトで画像を切り替える jQuery smart-crossfade.js

html上にはhover前の画像を入れておき、画像の置き場にhover後の画像も用意しておく。
その際前の画像には [_off] をファイル名の最後に、後の画像には [_on] をファイル名の最後にいれる。
拡張子やサイズはもちろん統一しておく。

クリックで現れる〜アコーディオン〜

<!-- html -->
<dl class="accordion">
        <dt>イルカの画像</dt>
        <dd><img src="01.jpg"></dd>
        <dt>魚の画像</dt>
        <dd><img src="02.jpg"></dd>
</dl>
//script
$(function () {
$('.accordion dd').hide();
$(".accordion dt").css('cursor','pointer')
.click(function () {
$(this).toggleClass("open");
$(this).next("dd").slideToggle(500,'easeInOutExpo');});
});

参考:スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery

dl(定義リスト)を作った後classにaccordionを追加するだけで開閉式のアコーディオンが完成!
ボタン扱いであるdtのclassにopenが追加されるのでそれを使って背景変更などもできます。

クリックで現れる〜アコーディオン〜
(表示されるのは一つのみ)

<!-- html -->
<dl class="accordion01">
        <dt>イルカの画像</dt>
        <dd><img src="01.jpg"></dd>
        <dt>魚の画像</dt>
        <dd><img src="02.jpg"></dd>
</dl>
//script
$(function () {
$('.accordion01 dd').hide();
$(".accordion01 dt").css('cursor','pointer')
.click(function () {
$(this).toggleClass("open");
$(this).siblings("dt").removeClass("open");
$(this).next("dd").slideToggle(500,'easeInOutExpo');
$(this).next("dd").siblings("dd").slideUp();});
});

参考:スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery

dl(定義リスト)を作った後classに[accordion01]を追加するだけで開閉式のアコーディオンが完成!
こちらは一度に開いている数が一つだけのもの

フェードで切り替わるタブコンテンツ

<!-- html -->
<ul class="tab_menu">
        <li><a href="#tab1">タブ1</a></li>
        <li><a href="#tab2">タブ2</a></li>
        <li><a href="#tab3">タブ3</a></li>
      </ul>
      <div class="tab_content">
        <div id="tab1"> <img src="03.png"></div>
        <div id="tab2"> <img src="04.png"></div>
        <div id="tab3"> <img src="05.png"></div>
      </div>
//script
$(function(){
$(".tab_content div").hide();
     $(".tab_menu li:first").addClass("tab_active").show();
     $(".tab_content div:first").show();
     $(".tab_menu li").click(function() {
          $(".tab_menu li").removeClass("tab_active");
          $(this).addClass("tab_active");
          $(".tab_content div").hide();
          var activeTab = $(this).find("a").attr("href");
          $(activeTab).fadeIn();
          return false;
     });
});

参考:これで簡単!フェード処理で切り替わるタブコンテンツの作成方法

クリックするためのタブらをulで作成し、クラスに[tab_menu]を追加
切り替えて表示したい物一つ一つをdivで囲みながら作り、最後にそれらをまとめて[div class=”tab_content”]で囲む

[tab_menu]のリストの一番上や、クリックされたリストにはclass[tab_active]が追加されるのでそれを使って装飾することが可能

クリックするタブと対応するコンテンツを、それぞれアンカーリンクしなければならなかったりする手間がめんどくさい

ある程度スクロールすると現れる&トップに戻る

<!-- html -->
 <p class="fade"><a href="#top"><img src="top.png"></a></p>
//script
//途中で現れる
$(function() {
	$('.fade').hide();
	$(window).scroll(function () {
		var s = $(this).scrollTop();
		var m = 200;
		if(s > m) {
			$(".fade").fadeIn('fast');
		} else if(s < m) {
			$(".fade").fadeOut('fast');
		}
	});
});

//スムーズなスクロールをさせる
$(function(){
   $('a[href^=#top],.smooth').click(function() {
      var speed = 1000;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'easeInOutExpo');
      return false;
   });
});

参考:スクロール量に合わせてボタンを表示する

参考:【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript

スクロールをした時に表示させたい要素にclassの[fade]を追加するだけで大丈夫。
[var m = 200;]の数字200が一番上からの距離なのでここで調整

ページのトップに戻るボタンを作るときは、目的地にid[top]を設定して、ボタンに[a href=”#top”]を足す。
ページ内を移動するアンカーリンクの時はボタンにclass[smooth]を追加するとスルスル動く

動かすには

jQuery本体と動きを書いたファイルが必要

方法1:ファイルをダウンロードして使う場合
jQuery本体を落とす所 http://jquery.com/

方法2:グーグルに身をゆだねる

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

動き:
上記の動きをまとめたファイル(common.js)をダウンロードする!

ファイルを設置した後、htmlやらのファイルに書く

head内とかに書くやつ

<!-- htmlファイルとjsファイルを同じ階層において、下をコピペすれば動く -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="common.js"></script></p>

終わり

リセットcssのごとくサイトを作る際とりあえず入れておくファイルに、こういった簡単で便利なjsファイルを入れておくと色々捗りますよね。

地味に追加していく予定です。

rss登録
このエントリーをはてなブックマークに追加