Question

我见过很多css切换器，它们放置一个按钮，允许用户根据自己的喜好改变风格。我正在寻找一个我尚未找到的类似解决方案。

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

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

Answer 1

您可以清除实际加载样式表的代码，并通过setInterval调用而不是单击按钮来触发它。您需要提供样式表的URL。这可以存储在javascript数组中，您可以简单地在间隔计时器触发的函数中旋转数组的元素（或随机选择一个）。然后，您将推进索引（mod数组大小）以获得要显示的下一个样式。

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

更新：今天我花了一些时间将示例转换为适用于我的插件。您可以在我的博客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找到使用select和链接的代码演示。

自动jquery样式表切换器

1 个答案: