《双陈记》情侣博客

位置:主页 > IT那点事,折腾WP > 用jQuery实现《双陈记》的网站换肤

用jQuery实现《双陈记》的网站换肤

  这两天,折腾了一下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才是关键了。



无觅相关文章插件

已经有4位童鞋留言了,还不来盖楼!

  1. 交换个链接,我已经给你做好了

    网站名称: 飞燕南归
    网址:http://www.fygui.com/
    网站简介:股票、期货、外汇及休闲

  2. newton

    这头像抖动挺好玩

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片