在QQ空间中或者其他网站中有很多一键换肤的功能,今天也进行实现一个简单的换肤功能。
1.实现思路
在实现换肤功能时,我们应该注意到,大部分换肤功能页面中的内容是没有发生变化的,变化的只是背景样式的改变,有的页面中组件位置的调整,所以,实现只需要对同一个页面进行不同样式的替换即可,也就是说,我们有多少皮肤,就得有多少样式。
2.具体实现
首先,我们需要进行准备一个固定的html页面,命名为index.html,其内容如下所示:
同时,我们需要三套css样式,分别命名为flower_branch.css,foresttree.css,snow_partner.css,其内容之一如下所示:
body {
background: url("../images/skin_flower_branch.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.container {
margin: 20% 20% 2% 10%;
width: 500px;
height: 100%;
color: #4A8B0B;
}
.container input,textarea {
background-color: #94c3aa;
border: 1px solid;
}
这样,当我们进行点击index.html中的按钮进行换肤操作的时候,我们就进行样式的替换,下面是实现代码javaScript:
有了这些准备工作之后,我们就可以进行实际操作了,最后完成的页面如下所示:
一键换肤功能
treeBranch
snowPartner
flowerBranch
请输入用户名:
请输入密 码:
请输入确认密码:
请选择性别:
男
女
请选择爱好:
读书
看电影
写博客
看资料
请输入联系方式:
请输入自我评价:在浏览器中进行测试,我们能够通过按钮进行不同界面的切换,效果图之一如下所示:
下面是源代码链接地址:喜欢的请下载查看具体代码:一键换肤
..