|
|
切換效果參照本站。
1. 切換樣式的按鈕代碼：
復(fù)制代碼 代碼如下:
<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>
上面的按鈕代碼請根據(jù)你的網(wǎng)站設(shè)計放置。比如在我這里是放到header.php文件中的。
2. 樣式引用代碼：
復(fù)制代碼 代碼如下:
<?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”，所以在這里我會讓瀏覽器根據(jù)記錄進行樣式的調(diào)用（這里為兩個樣式，一個“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的加載還是需要那么一點時間，所以在切換樣式后的頁面瀏覽中并不完美。如果你以前發(fā)現(xiàn)選擇黑色主題后，再瀏覽頁面，會出現(xiàn)先是一瞬間的白色主題，然后才是黑色主題的現(xiàn)象。這就是我要說明的情況了?，F(xiàn)在使用php代碼則不再存在這個不足。
3. Javascript部分代碼：（注意前提是你已經(jīng)在網(wǎng)站中調(diào)用了JQuery庫）
復(fù)制代碼 代碼如下:
(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的塊樣式是為了在切換過程中制作一個燈箱效果，這樣會比突然的切換來得更為自然。
然后還需要添加產(chǎn)生cookie記錄的功能代碼：
復(fù)制代碼 代碼如下:
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記錄的功能代碼：
復(fù)制代碼 代碼如下:
function eraseCookie(name)
{
createCookie(name,"",-1);
}
到此，完成上面三部后就可以了，希望大家看得明白。
JavaScript技術(shù)：JQuery 前臺切換網(wǎng)站的樣式實現(xiàn)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
