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

到此,完成上面三部后就可以了,希望大家看得明白。
标签:
JQuery,前台切换

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JQuery 前台切换网站的样式实现”

暂无“JQuery 前台切换网站的样式实现”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。