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

但如果你想为网站添加多一些样式,让访客选择;又或者你想调整一下网站的样式,而在决定前让访客先体现的话,这也是一个很好的办法,省去总是切换主题的痛苦。
切换效果参照本站。
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);
}

到此,完成上面三部后就可以了,希望大家看得明白。

(0)

相关推荐

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

    但如果你想为网站添加多一些样式,让访客选择:又或者你想调整一下网站的样式,而在决定前让访客先体现的话,这也是一个很好的办法,省去总是切换主题的痛苦. 切换效果参照本站. 1. 切换样式的按钮代码: 复制代码 代码如下: <div id="style-switch"> <ul> <li><a href="#?style=white" rel="white" class="styleswitch w

  • jQuery实现企业网站横幅焦点图切换功能实例

    本文实例讲述了jQuery实现企业网站横幅焦点图切换功能的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jQuery图片切换插件jquery.cycle.js使用示例

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. 复制代码 代码如下: <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascri

  • 完美JQuery图片切换效果的简单实现

    效果如下: css: body { font-family:"Microsoft Yahei"; } body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;} /***大图切换***/ .scroll_view{margin: 0px auto;overflow:hidden;position: relative;} .photo_view li{po

  • jQuery使用之设置元素样式用法实例

    本文实例讲述了jQuery使用之设置元素样式用法.分享给大家供大家参考.具体分析如下: css是页面不能分隔的部分,jQuery中也提供了一些css相关的实用的办法.前面文章中有使用过 addClass()为元素添加css样式风格.这里主要介绍jQuery如何设置页面的样式风格.包括添加.删除.动态切换等. 1. 添加.删除css类别. 复制代码 代码如下: $(function() {     //同时添加多个CSS类别     $("img").addClass("css

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • jQuery实现切换页面布局使用介绍

    查看实例:DEMO  演示打包下载 XHTML 复制代码 代码如下: <a href="#" id="switch">切换布局</a> <div id="demo" class="showlist"> <div class="list"> <h3><a href="#">文章标题</a></h3&g

  • jQuery实现的网站banner图片无缝轮播效果完整实例

    本文实例讲述了jQuery实现的网站banner图片无缝轮播效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片轮播</title&g

  • JavaScript/jQuery实现切换页面效果

    本文实例为大家分享了JavaScript/jQuery实现切换页面效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8" />         <meta http-equiv="X-UA-Compatible" content="IE=edge&qu

  • jQuery实现切换字体大小的方法

    本文实例讲述了jQuery实现切换字体大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $.fn.switchSize = function(settings) { // defaults settings settings = $.extend({     container: 'body',     arrSizeClass: ['small', 'medium', 'large'],     defaultClass: 'medium',     saveCook

随机推荐

其他