-

10個の便利なjQueryスニペット(画像のプリロード、スムーススクロール、カラムの高さ揃え等)

画像のプリロード / アンカーへのスムーススクロール / マウスオーバーでのフェードイン・アウト他...全6件

画像のプリロード

(function($) { 
  var cache = []; 
  // Arguments are image paths relative to the current page. 
  $.preLoadImages = function() { 
    var args_len = arguments.length; 
    for (var i = args_len; i--;) { 
      var cacheImage = document.createElement('img'); 
      cacheImage.src = arguments[i]; 
      cache.push(cacheImage); 
    } 
  } 
 
jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); 

アンカーへのスムーススクロール

$(document).ready(function() { 
 $("a.topLink").click(function() { 
  $("html, body").animate({ 
   scrollTop: $($(this).attr("href")).offset().top + "px" 
  }, { 
   duration: 500, 
   easing: "swing" 
  }); 
  return false; 
 }); 
}); 

マウスオーバーでのフェードイン・アウト

$(document).ready(function(){ 
    $(".thumbs img").fadeTo("slow", 0.6); 
 
    $(".thumbs img").hover(function(){ 
        $(this).fadeTo("slow", 1.0); 
    },function(){ 
        $(this).fadeTo("slow", 0.6); 
    }); 
}); 

カラムの高さ揃え

var max_height = 0; 
$("div.col").each(function(){ 
    if ($(this).height() > max_height) { max_height = $(this).height(); } 
}); 
$("div.col").height(max_height); 

フォームでのEnterキー無効化

$("#form").keypress(function(e) { 
  if (e.which == 13) { 
    return false; 
  } 
}); 
最終更新日:2011-11-22 (7,871 views)

関連するトピックス

ページ上部に戻る