自动jquery样式表切换器 [英] automatic jquery stylesheet switcher

问题描述

我看过许多css切换器放置一个按钮，允许用户更改样式以适应自己的口味。我正在寻找一个我还没有找到的类似解决方案。

I have seen many css switchers which place a button allowing the user to change styles to suit their taste. I am looking for a similar solution that I have not yet found.

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

我希望我的页面每x秒从一个样式表到下一个样式表，所以css每x秒完全改变一次。我想在jquery做到简单和一些很好的过渡。再次，我希望这是自动发生，没有任何按钮的点击。

I want my page to fade from one style sheet to the next every x seconds, so css completely changes every x seconds. I want to do it in jquery for simplicity and some nice transitions. Again, I want this to happen AUTOMATICALLY, without the click of any button. Anybody see any code out there that can do this?

推荐答案

您可以清除实际加载样式表并触发它的代码一个setInterval调用而不是一个按钮点击。您需要提供样式表的网址。这可以存储在一个javascript数组，你可以简单地旋转数组的元素（或随机选择一个）在间隔定时器触发的函数。

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

更新：我花了一些时间将示例转换为插件为我工作与选择。您可以在我的博客上找到代码， http ：//farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html 。这里是我可能会继续使用它。这将与theme1.css，theme2.css等工作。这是在urls的样式：/example.com/styles/theme1.css，...

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, ...

脚本：

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

演示：

使用select和链接的代码，请访问 http://myweb.uiowa.edu/timv / retheme-demo 。

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

这篇关于自动jquery样式表切换器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！