- 浏览: 53796 次
- 性别:
- 来自: 北京
最新评论
Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能) <ul id="skin"> Js部分: 1.换肤方法 //设置cookie,按钮选中状态,页面皮肤 2.存取cookie //将当前皮肤n存到cookie } 3.绑定换肤按钮事件 skin.addEvent=function(){ 4.页面加载完成后设置皮肤样式 window.onload=function(){
<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>
skin.setSkin=function(n){
var skins =("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].className="";//初始化按钮状态
}
skin.setCookie(n);//保存当前样式
("skin_"+n).className="selected";//设置选中皮肤按钮的样式
("cssfile").href="css/main"+n+".css";//设置页面样式
}
skin.setCookie=function(n){
var expires=new Date();
expires.setTime(expires.getTime()+24*60*60*365*1000);
var flag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
//返回用户设置的皮肤样式
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;//如果没有设置则显示默认样式
}
else{
var start=mycookie.indexOf("=",start1)+1;
var end=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start,end));
if (values!=null)
{
skin=values;
}
}
return skin;
var skins =("skin").getElementsByTagName("li");
for (i=0;i<skins.length;i++)
{
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
skin.setSkin(skin.readCookie());//根据读取cookie返回值设置皮肤样式
skin.addEvent();//绑定按钮事件
发表评论
-
DIV+CSS常用的Html网页布局代码
2009-09-28 23:06 931单行一列以下是引用片段:body { margin: 0 ... -
五行代码带来的无缝滚动程序
2009-09-28 23:05 608element.appendChild(newNode) 方法 ... -
网页视频代码集合
2009-09-28 21:15 10801.avi格式代码片断如下: <object id=& ... -
经验记录: 在css调用时 可以将css写成.txt 形式!!
2009-09-24 00:18 775同题 -
ps做透明背景pbg
2009-09-23 11:16 976SHIFT+ALT+CTRL+S 保存web图时 保 ... -
常用的"收藏,打印,另存为"等JS代码(按纽INPUT和链接形式)
2009-09-14 21:49 1042脚本说明: 把如下代码加入<body>区域中: ... -
window.open()的所有参数列表
2009-09-14 21:51 512前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹 ... -
关于上传图片自动添加网址之upfile_photo.asp
2009-09-14 22:02 919strJS = strJS & "paren ... -
免费百度搜索引擎代码、Google搜索引擎代码、综合搜索引擎代码
2009-09-15 01:10 4759一、百度搜索代码 1、 <table width=9 ... -
css+div实现圆角
2009-09-15 16:03 9751: <html><head>< ... -
百度有啊css圆角方案
2009-09-15 16:06 662<!DOCTYPE html PUBLIC " ... -
用CSS为table添加边框
2009-09-16 07:35 3775在用CSS给表格定义1像素的边框的时候,是个比较棘手的问题 ... -
css之自动换行
2009-09-16 07:37 956自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字 ... -
css里直接定义table
2009-09-16 07:40 593<style>table{border-colla ... -
jquery 冲突与prototype(工具网站笔记)
2009-09-16 16:50 722prototype 在定义过程中采用$()来代替 docume ... -
常用的"收藏,打印,另存为"等JS代码(按纽INPUT和链接形式)
2009-09-18 19:22 625脚本说明: 把如下代码加入<body>区域中: ... -
jquery和prototype冲突解决
2009-09-18 19:54 814最近做项目用到了jQuery验证,可在应用的js中也有prot ... -
Ajax技术(WEB无刷新提交数据)- 及ajax出生
2009-09-19 11:33 1113Ajax内部交流文档一、使用Ajax的主要原因 1、通过适当的 ...
相关推荐
css+js实现网站换肤 思路:通过用户选择的风格,通过JS函数,启用或取消特定CSS的引用。
主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下
实现网页的皮肤更换 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0036)...
皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能) ”skin”> ”skin_0″ title=”灰色”>灰色</li> ”skin_1″ title=”绿色”>绿色</li> ”skin_2″ title=”黄色”>黄色</li> <li id=”skin_3″ tit
基于CSS JAVAScript的网页换肤特效的设计与实现.pdf
javascript菜单和css换肤
javascript实现动态CSS换肤技术的脚本.docx
页面换肤已经成为web2.0的时尚,看似简单的过程,实现起来却不那么容易,因为它涉及到javascript写入和读取cookie,这篇文章详细介绍了通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤功能 Html代码部分...
css+javascript实现客户端表现层的换肤! css +javascript实现客户端表现层的换肤!
通过javascript的cookie和css技术,实现用户更改网站整体风格的示例
1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录...
注:强烈建议Web基础不扎实的同学请重头到尾把项目代码敲一遍. 源码简介: [360导航]完整源码,2015版闪亮登场,纯净绿色 v5.0 ...360安全网址是360旗下的网址导航,以其...五、支持天气预报,支持邮箱登陆,支持官方换肤。
javascript实现动态CSS换肤技术的脚本
页面使用了Html+Javascript+ASP.Net作为B/S模式下的前台开发工具,C#作为B/S模式下的后台编码语言,ASP.NET作为B端的数据访问技术,SQL SERVER 2012作为后台的数据库,页面的加载、效果作为div+css作为网页布局。...
js换肤功能的实现原理非常简单,就是使用js切换对应的css样式表文件,本文重点给大家介绍JavaScript实现换肤功能,感兴趣的朋友参考下吧
通过jquery实现网页换肤 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>Jacob Song的购物网站 ...
利用JavaScript实现无刷新切换网页的CSS文件,以达到无刷新切换风格的目的,也就是大家俗说的“换肤”特效原理当然是利用JS在客户端执行的特性重载不同的CSS文件,来实现网页风格的变化,CSS文件需要WEB开发者事先...