jquery - クリックで変わる Web サイトの背景画像を作成する

Question

クリックすると変化する背景画像を作成する方法を知りたいです。このような一連の画像を通過することになっています。これを作る方法の手がかりはありますか？

Answer 1

jQuery の方法

基本的なjQueryソリューションは次のとおりです。

var images = [
  'http://placekitten.com/500/500',
  'http://placekitten.com/400/400',
  'http://placekitten.com/750/750'
];

$(".changeBG").on("click", function(){
  $("body").css("backgroundImage", function( o, v ) {
    var backg = v.match( /\((.+)\)/ );
    var index = $.inArray( ( backg ? backg[1] : "" ), images );
    return "url('" + ( images[++index] || images[0] ) + "')";
  });
});

デモ: http://jsbin.com/isubag/2/edit

純粋な JavaScript の (ほぼ) 方法

このソリューションは jQuery にかなり負担がかかるため、少し遅くなります。はるかに全体論的なアプローチをとることもできます。残念ながら、on arrayのネイティブ サポートはそれほど優れていないため、 $.inArray(ポリフィルは存在しますがindexOf) まだ使用されています。

var bg = {
  images: [
    'http://placekitten.com/500/500',
    'http://placekitten.com/400/400',
    'http://placekitten.com/750/750'
  ],
  get: function () {
    var match = document.body.style.backgroundImage.match( /\((.+)\)/ );
    return match ? match[1] : "" ;
  },
  set: function ( url ) {
    document.body.style.backgroundImage = "url('" + url + "')" ; 
  }
};

function bgCycler () {
  var index = $.inArray( bg.get(), bg.images );
  bg.set( bg.images[++index] || bg.images[0] );
}

デモ: http://jsbin.com/isubag/edit#javascript,html