2017

04

Mar

javascript・jQuery

bgswitcher.js タブレットで、coverが効かないとき。。

背景画像をフェードで切り替えしたい場合、jQueryで、タイマ使ってちょっと変更したらできるかなって
思ったけど、案外うまくいかない。
どうやら、背景画像には、フェードがきかず、何枚か画像を重ねてフェードで切り替える必要があるようだ。
ささっと出来そうもないので、すでにある
bgswitcher.js
というプラグインを使うことにした。

https://github.com/rewish/jquery-bgswitcher

すごい簡単に実装できるのだが、
タブレットで確認すると、なぜかcoverが効かず、
画像がrepeatされてしまっている。

PCでChromeのデバッガで、タブレットサイズにして、確認すると、キチンと出ている。
コードを解析すると、どうやらこのプラグインは、背景画像の上に1つ画像を置いて、
切り替えているようだ。
そのときに、今のbackgroundのCSSをコピーしてstyleで埋め込んでいる。
タブレットの場合は、そのstyleがどうやら効いていないようだ。

なので、jquery.bgswitcher.jsを改造
_copyBackgroundStylesの関数内

      for (; i < length; i++) {
        prop = 'background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);

        prop = '-webkit-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);

        prop = '-moz-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);

        prop = '-o-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);

        prop = '-ms-background' + backgroundProperties[i];
        copiedStyle[prop] = this.$el.css(prop);

      }

-webkit-
-moz-
-o-
-ms-

を設定してやれば、うまくできるようになりました。


タグ

同じ「javascript・jQuery」カテゴリの記事
ABOUT

福岡在住、フリーランスのプログラマのメモ日記です。組込SEからWEB系に転向。子育てしながら、在宅SOHOにてお仕事しています。
ウェブサイトを作っていて困ったことや、よく調べることを書いていきます。

[対応言語]
HTML、CSS、PHP、Javascript、jQuery
Ruby On Rails、JAVA、C、C++、VB

[運営サイト]
キャラデコ弁.com
CSSデザインジェネレーター