网站换皮肤效果 – iTheme

网站换肤效果图

主要效果：

  1. 首次加载进行cookie判断(无=加载默认、有=加载上次保存);
  2. 按钮点击 #按钮活动状态转移、#CSS外链进行更改、#cookie值变化;
  3. id为box的效果通过外加载的CSS变化从而进行颜色变化;
  4. 按钮的在增多以及减小时不受影响。

修改提示：

  1. 别忘记link里的ID、按钮列表li的ID、以及css文件的命名;
  2. 可能你的CSS文件不是这样组织的，请在$(‘themecss’).href= ’style/theme_’ + index + ‘.css’;这行进行文件地址的更改;
  3. 修改时，尽量让li的class名和css文件名保持一致。

预览: http://byzuo.com/demo/itheme/
下载: http://www.box.net/shared/ysmtz9h9v3

标签: , ,

这篇文章发布于 2009年03月11日，星期三，2:01 下午，归类于 网页开发的。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。

12 条评论 发表在“网站换皮肤效果 – iTheme”上

  1. 小西 @ 2009年10月14日 at 9:41 上午

    效果不错啊。但是下载不了。不知道能不能发邮箱。谢谢了。

  2. carrien @ 2009年10月14日 at 9:58 上午

    @小西
    下载地址 http://byzuo.com/demo/itheme/itheme.zip

  3. Rill @ 2009年12月9日 at 5:40 下午

    换肤以后，总是还要加载一次默认皮肤，这点很郁闷啊

  4. carrien @ 2009年12月9日 at 6:51 下午

    当然要加载默认皮肤了，这是需求，不然就没意义了~
    给用户一个他选择的颜色。

  5. Rill @ 2009年12月9日 at 7:01 下午

    这给人的感觉很不好。我明明选了是绿色风格，可每次刷新的时候都是先显示灰色风格，然后再变成绿色风格。。。。

  6. carrien @ 2009年12月9日 at 7:33 下午

    可每次刷新的时候都是先显示灰色风格，然后再变成绿色风格。。。。
    哦，对，我仔细一看，你的想法是对的。
    其实可以默认加载的另一个CSS href为空，再用JS去加载这样感觉更好。谢谢提醒

  7. Rill @ 2009年12月10日 at 1:07 上午

    加载一个空的css也会有个问题，每次刷新的时候会先显示空白,然后再出现绿色风格

  8. carrien @ 2009年12月17日 at 10:08 上午

    @Rill
    显然我觉得这是最佳的方法了，暂时想不到更佳的处理方案。
    你有更好的办法吗，分享一下。

  9. Rill @ 2010年01月13日 at 4:07 下午

    将当前风格存到cookie中，然后每次刷新的时候判断cookie中是否有值，有的话就取cookie中存的皮肤。切换皮肤的时候，更新cookie

  10. carrien @ 2010年01月13日 at 4:14 下午

    案例中本来就是这样做的

  11. Rill @ 2010年01月14日 at 1:23 下午

    案例中默认加载了蓝色皮肤，所以每次都会有个颜色变换，我增加了一段代码，这样就不会有这个问题了
    <%
    String currentTheme="theme_blue";
    String cookieName = "iThemeIndex";
    Cookie cookies[] = request.getCookies();
    if (cookies!=null){
    for(int i=0;i
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/css” id=”themecss”/>

  12. Rill @ 2010年01月14日 at 1:24 下午

    if (cookies!=null){
    for(int i=0;i<cookies.length;i++){
    Cookie cookie = cookies[i];
    if (cookieName.equals(cookie.getName())){
    currentTheme = cookie.getValue();
    }
    }
    }

留下回复