0

ユーザーが好みに合わせてスタイルを変更できるボタンを配置するcssスイッチャーをたくさん見ました。私はまだ見つけていない同様の解決策を探しています。

これが最も近いです：http： //net.tutsplus.com/demos/03_jQueryStyleSwitcher/demo/index.php#

ページをあるスタイルシートから次のスタイルシートにx秒ごとにフェードさせたいので、cssはx秒ごとに完全に変更されます。単純さといくつかの素晴らしい遷移のために、jqueryでそれを実行したいと思います。繰り返しますが、ボタンをクリックすることなく、これを自動的に実行したいと思います。誰かがこれを行うことができるコードを見ていますか？

4

1 に答える 1

3

実際にスタイルシートをロードするコードを清掃し、ボタンをクリックする代わりにsetInterval呼び出しからトリガーすることができます。スタイルシートのURLを指定する必要があります。これはjavascript配列に格納でき、間隔タイマーによってトリガーされる関数で配列の要素を単純に回転させる（またはランダムに1つ選択する）ことができます。次に、インデックス（mod array size）を進めて、次のスタイルを表示します。

var styles = [ '/example.com/css/style1.css', '/example.com/css/style2.css' ];
var currentStyle = 0;

setInterval( function() {
       currentStyle = (currentStyle + 1) % styles.length;
       loadStylesheet( currentStyle );
}, 5000 );

更新：私は今日、例をselectで機能するプラグインに変換するのに時間を費やしました。コードは私のブログhttp://farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.htmlにあります。これが私がおそらくそれを使用する方法です。これは、theme1.css、theme2.cssなどで機能します。これは、URLのスタイルです：/example.com/styles/theme1.css、..。

脚本：

var currentTheme = 0;
var themes = $('.theme');
themes.retheme({
   baseUrl: '/example.com/styles',
   loadingImg: '/example.com/images/image.gif'
});

setInterval( function() {
    currentTheme = (currentTheme + 1) % themes.length;
    themes.eq(currentTheme).trigger('click');
});

HTML：

<input type='hidden' class='theme' value='theme1' />
<input type='hidden' class='theme' value='theme2' />
<input type='hidden' class='theme' value='theme3' />

デモ：

選択とリンクの両方を使用したコードのデモは、http：//myweb.uiowa.edu/timv/retheme-demoにあります。

于 2009-08-12T14:01:05.970 に答える