0

我见过许多 CSS 切换器，它们放置一个按钮，允许用户更改样式以适应他们的口味。我正在寻找尚未找到的类似解决方案。

这是最接近的：http: //net.tutsplus.com/demos/03_jQueryStyleSwitcher/demo/index.php#

我希望我的页面每 x 秒从一个样式表淡入到下一个样式表，所以 css 每 x 秒完全改变一次。为了简单和一些不错的过渡，我想在 jquery 中做。同样，我希望这可以自动发生，无需单击任何按钮。有人看到任何可以做到这一点的代码吗？

4

1 回答 1

3

You could scavenge the code that actually loads the stylesheet and trigger it from a setInterval call instead of a button click. You'd need to supply the url for the stylesheet. This could be stored in a javascript array and you could simply rotate through the elements of the array (or pick one randomly) in the function triggered by the interval timer. You'd then advance the index (mod array size) to get the next style to display.

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 );

Update: I spent some time today converting the example into a plugin that works for me with a select. You can find the code on my blog, http://farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html. Here's how I would probably proceed to use it. This would work with theme1.css, theme2.css, etc. That is styles at the urls: /example.com/styles/theme1.css, ...

Script:

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' />

Demo:

A demo of the code using both a select and links can be found at http://myweb.uiowa.edu/timv/retheme-demo.

于 2009-08-12T14:01:05.970 回答