收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 24418|回复: 52

页面换肤功能浅析

[复制链接]
发表于 2008-6-3 15:51:53 | 显示全部楼层 |阅读模式
原理:通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤.
换肤示例.rar (8.93 KB, 下载次数: 1799)

评分

参与人数 1威望 +1 收起 理由
sunritz + 1 谢谢分享

查看全部评分

发表于 2008-6-3 16:09:16 | 显示全部楼层
我也海淀的 有空加我QQ交流下啊
回复 支持 反对

使用道具 举报

发表于 2008-6-5 09:37:40 | 显示全部楼层
嗯.
好哦`

学习..


回复 支持 反对

使用道具 举报

发表于 2008-6-5 09:41:37 | 显示全部楼层
学习了 谢谢
回复 支持 反对

使用道具 举报

发表于 2008-6-10 11:17:20 | 显示全部楼层

回复 ymyang 在 1# 的帖子


不错
值得收藏
回复 支持 反对

使用道具 举报

发表于 2008-6-10 12:30:40 | 显示全部楼层
共同学习^_^
正鼓捣换肤的东东哪
回复 支持 反对

使用道具 举报

发表于 2008-6-30 15:56:00 | 显示全部楼层
FF不兼容啊。。哪位大虾能改好么
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-6-30 16:35:21 | 显示全部楼层
兼容ff的,楼上看看是不是firefox禁用cookie了
回复 支持 反对

使用道具 举报

发表于 2008-6-30 17:01:39 | 显示全部楼层
这个是很经典的一个办法。

尤其是存储cookies 更是很人性化的
回复 支持 反对

使用道具 举报

发表于 2008-6-30 17:32:48 | 显示全部楼层
原帖由 [i]ymyang 于 2008-6-30 16:35 发表
兼容ff的,楼上看看是不是firefox禁用cookie了

不是的啊。是那些按钮不可以点啊。点了没反应,皮肤也不变
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-6-30 17:40:26 | 显示全部楼层
firefox菜单-工具-选项-内容-启用javascript
回复 支持 反对

使用道具 举报

发表于 2008-7-1 17:34:01 | 显示全部楼层
原帖由 [i]ymyang 于 2008-6-30 17:40 发表
firefox菜单-工具-选项-内容-启用javascript

晕。这个我也设置了。难道是我的FF有问题
回复 支持 反对

使用道具 举报

发表于 2008-7-2 14:09:04 | 显示全部楼层
很漂亮的效果  兼容FF
谢谢分享
晕 好像出问题了   在ff上运行一次后  就不能用了
IE下一直正常
最新动态:我清楚了一下cookie  又正常了

[[i] 本帖最后由 shaohua162001 于 2008-7-2 14:30 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-7-19 16:54:46 | 显示全部楼层

非常感谢

楼主,我运行代码时,IE和FF都能兼容了,但是在IE浏览器下,你F5一刷新,又回到原始的配色方案,有办法解决吗?
回复 支持 反对

使用道具 举报

发表于 2008-7-19 17:44:53 | 显示全部楼层
很好的想法...
回复 支持 反对

使用道具 举报

发表于 2008-7-19 18:36:19 | 显示全部楼层
用了css还加上js控制,不是什么好方法。这样变得还要考虑js的浏览器兼容问题。
回复 支持 反对

使用道具 举报

发表于 2008-7-19 18:58:05 | 显示全部楼层
不错,学习一下!!!
回复 支持 反对

使用道具 举报

发表于 2008-7-19 19:07:10 | 显示全部楼层
换肤的功能一般都是用DIV来实现的吧,也就是说根据选择调用不同的DIV CSS样式!!个人理解
回复 支持 反对

使用道具 举报

发表于 2008-7-21 09:27:38 | 显示全部楼层

回复 cqliudebao 在 18# 的帖子

不是DIV 是CSS样式
回复 支持 反对

使用道具 举报

发表于 2008-7-21 09:43:24 | 显示全部楼层

ddddd

dddddddddddddddddddddddddddddddd
回复 支持 反对

使用道具 举报

发表于 2008-7-23 12:29:34 | 显示全部楼层

IE7下有问题

未命名.jpg
删除全部的浏览记录又可以了,刷新下就又不行了。
我是放在IIS下面测试的.直接打开的话也没问题.

[[i] 本帖最后由 tongfan 于 2008-7-23 12:33 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-7-23 14:30:10 | 显示全部楼层
楼主好人,顶一个
回复 支持 反对

使用道具 举报

发表于 2008-7-23 17:16:32 | 显示全部楼层
学习了,谢谢分享
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-7-24 14:14:57 | 显示全部楼层
原来的方法在ie7下读取的cookie值有时会有问题.
重写了一个新的截取方法.

  1. skin.readCookie=function(){
  2.         var skin=0
  3.         var mycookie=document.cookie;
  4.         var name="Skin_Cookie";
  5.         if(mycookie.indexOf(name+"=")==-1){
  6.                 skin=0;
  7.         }
  8.         else{
  9.                 var values=mycookie.split(name+"=")[1].split(";")[0];
  10.                 if (values!=null)
  11.                 {
  12.                         skin=values;
  13.                 }
  14.                 else{
  15.                         skin=0;               
  16.                 }
  17.         }
  18.         return skin;
  19.        
  20. }
复制代码
回复 支持 反对

使用道具 举报

发表于 2008-8-21 16:07:36 | 显示全部楼层
有一个小问题没有解决!

如果有子页面也要跟着主页面换肤的时候!

子页面HTML中必须包含

<ul id="skin" class="skins">                               
            <li id="skin_0" title="灰色">灰色</li>
            <li id="skin_1" title="绿色">绿色</li>
            <li id="skin_2" title="黄色">黄色</li>
            <li id="skin_3" title="蓝色">蓝色</li>
            <li id="skin_4" title="粉色">粉色</li>
            <li id="skin_5" title="紫色">紫色</li>
</ul>

否则在子页面不起作用!楼主能否再改改!

坛子里还有一个换肤的,思路跟你这个差不多,但也有一个缺点,就是在主页面的点击换肤的时候,不显示当前点的是哪个皮肤......但这个有个好处就是子页面不用再加"ID"引入,也可以跟着主页一起换肤.
看这个链接http://www.dvlot.com/changeskin/
回复 支持 反对

使用道具 举报

发表于 2008-8-21 16:37:49 | 显示全部楼层
收藏学习下,真的不错啊
回复 支持 反对

使用道具 举报

发表于 2008-8-22 17:02:45 | 显示全部楼层
谢谢!有空学习一下
回复 支持 反对

使用道具 举报

发表于 2008-8-22 17:38:09 | 显示全部楼层
IE7下测试出错。刷新后出现出错信息。

行:54
char:2
null为空或不是对象。

[[i] 本帖最后由 show999 于 2008-8-22 17:40 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-9-22 18:23:05 | 显示全部楼层
先学习下`
回复 支持 反对

使用道具 举报

发表于 2009-2-4 14:41:09 | 显示全部楼层
确实不错
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-9-22 08:03 , Processed in 0.171441 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表