这两天,折腾了一下jquery的换肤技术,就是利用jquery和css动态的更换网站的页面样式。之前就一直想实现这个功能,因为看到过某高人写好的jq代码,就很方面了,剩下的就是自己写css了。不过由于没找到好的素材来设计新的页面样式,所以就一直没折腾这事。恰好那天随便打开了个桌面壁纸的网站随意看看,结果就找了一个合适的素材,“黑白猪猪”,和我家厕所的瓷砖那对猪猪是一样的,缘分啊。然后就下载了一些图片壁纸,开始捣腾起来了。页面设计好后,就改下css了。很快就差不多OK了。
期间出了点小问题,用最新的jq1.4就杯具了,功能无法实现,哎,对于现阶段处于菜鸟的我也搞不懂是怎么一回事,就只用之前的版本。我还犯了一个很傻的错误,直接把家里测试机的css地址,传到了空间里,在家看着没一点问题,当时还没发现,结果今早上班到公司,一打开《双陈记》,就杯具了,css地址没找到,没加载起。
上个图:
猛击网站换肤右边的两个桃心就可以实现网站样式切换,第一个桃心为默认样式,第二个为的样式《黑白猪猪》。猛击吧!
截个图:
需要换肤代码的朋友猛击此处:styleswitch.js下载这个JQ代码后直接和JQ库文件(最好是1.2.6版本的)一起调用,在<header>中调用你的css文件:
<link title=css1 href="style/s1.css" type=text/css rel=stylesheet>
<link title=css2 href="style/s1.css" type=text/css rel=stylesheet>
在<body>中写入:
<a class="styleswitch a1" title="样式1" rel="css1"></a>
<a class="styleswitch a2" title="样式2" rel="css2"></a>
就ok了。我觉得jq代码是其次,换样式css才是关键了。
交换个链接,我已经给你做好了
网站名称: 飞燕南归
网址:http://www.fygui.com/
网站简介:股票、期货、外汇及休闲
友联已添加哈!
这头像抖动挺好玩
抖抖更给力