JQuery 前台切换网站的样式实现


Posted in Javascript onJune 22, 2009

但如果你想为网站添加多一些样式,让访客选择;又或者你想调整一下网站的样式,而在决定前让访客先体现的话,这也是一个很好的办法,省去总是切换主题的痛苦。
切换效果参照本站。
1. 切换样式的按钮代码:

<div id="style-switch"> 
<ul> 
<li><a href="#?style=white" rel="white" class="styleswitch white">Day</a></li> 
<li><a href="#?style=black" rel="black" class="styleswitch black">Night</a></li> 
</ul> 
</div>

上面的按钮代码请根据你的网站设计放置。比如在我这里是放到header.php文件中的。
2. 样式引用代码:
<?php if($_COOKIE['style'] == 'black') : ?> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" /> 
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" /> 
<?php else : ?> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" /> 
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" /> 
<?php endif; ?>

在这里我简单说明一下:
因为在后面的js代码中会于浏览器的cookie部分写入一个cookie记录“style”,所以在这里我会让浏览器根据记录进行样式的调用(这里为两个样式,一个“white”,另一个“black”)。
当浏览器存在“style”的cookie记录,并记录为“black”时候,则先读取black.css文件,这可以说是主样式文件;及后再读取辅助样式(就是供需要切换的样式),white.css。
如果浏览器没有任何“style”的样式cookie记录,或者“style”的样式cookie记录为“white”时候,则主题先读取white.css文件,再读取black.css文件。
在这里需要补充的是,使用PHP的cookie读取会比使用js的cookie读取更为有效。因为我原来是利用js进行cookie的读取动作,但由于js的加载还是需要那么一点时间,所以在切换样式后的页面浏览中并不完美。如果你以前发现选择黑色主题后,再浏览页面,会出现先是一瞬间的白色主题,然后才是黑色主题的现象。这就是我要说明的情况了。现在使用PHP代码则不再存在这个不足。
3. Javascript部分代码:(注意前提是你已经在网站中调用了JQuery库)
(function($) 
{ 
$(document).ready(function() { 
$('.styleswitch').click(function() { 
$('body').append('<div id="overlay" />'); 
$('#overlay') 
.css({ 
display: 'none', 
position: 'absolute', 
top:0, 
left: 0, 
width: '100%', 
height: '2000%', 
zIndex: 1000, 
background: 'black' 
}) 
.fadeIn(500); 
switchStylestyle(this.getAttribute("rel")); 
$('#overlay').fadeOut(500); 
return false; 
}); 
}); 
function switchStylestyle(styleName) 
{setTimeout(function() { 
$('link[@rel*=style][title]').each(function(i) 
{ 
this.disabled = true; 
if (this.getAttribute('title') == styleName) this.disabled = false; 
});}, 500); 
createCookie('style', styleName, 365); 
} 
})(jQuery);

上面的部分是点击动作部分。我在中间添加了一段#overlay的块样式是为了在切换过程中制作一个灯箱效果,这样会比突然的切换来得更为自然。
然后还需要添加产生cookie记录的功能代码:
function createCookie(name,value,days) 
{ 
if (days) 
{ 
var date = new Date(); 
date.setTime(date.getTime()+(days*24*60*60*1000)); 
var expires = "; expires="+date.toGMTString(); 
} 
else var expires = ""; 
document.cookie = name+"="+value+expires+"; path=/"; 
}

还有添加删除cookie记录的功能代码:
function eraseCookie(name) 
{ 
createCookie(name,"",-1); 
}

到此,完成上面三部后就可以了,希望大家看得明白。
Javascript 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 #Javascript
web 页面分页打印的实现
Jun 22 #Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 #Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 #Javascript
js 单引号 传递方法
Jun 22 #Javascript
使弱类型的语言JavaScript变强势
Jun 22 #Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
vue-axios使用详解
2017/05/10 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python中http请求方法库汇总
2016/01/06 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python 异常处理总结
2016/10/18 Python
简单的python后台管理程序
2017/04/13 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
优秀医生事迹材料
2014/02/12 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
国家助学金感谢信
2015/01/21 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js