JQueryフロントエンドスイッチングWebサイトスタイル実装_JavaScriptスキル-jsチュートリアル-php.cn

ただし、訪問者が選択できるスタイルを Web サイトに追加したい場合、または Web サイトのスタイルを調整して、決定を下す前に訪問者に検討してもらいたい場合には、これはテーマをすべて切り替える必要を避ける良い方法でもあります。時間。
切り替え効果についてはこちらのサイトを参照してください。
1. スタイルボタンのコードを切り替えます:

コードをコピーしますコードは次のとおりです:

夜 ;/ li>

ウェブサイトのデザインに合わせて上記のボタンコードを配置してください。たとえば、私の場合は、header.php ファイルに配置されます。
2. スタイル参照コード:

コードをコピーします。コードは次のとおりです:

  
 link rel= "代替スタイルシート" type="text/css" href="/black.css" title="black" media="screen" /> 🎜>< ;?php endif; ?> 

ここで簡単に説明します: 
以下の js の cookie 部分に cookie レコードの「style」が記述されるためです。コードなので、ここではブラウザーにレコードに従ってスタイルを呼び出させます（ここでは 2 つのスタイル、1 つは「白」、もう 1 つは「黒」です）。

ブラウザに「style」の Cookie レコードがあり、それを「black」として記録すると、最初にメインスタイルファイルと言える black.css ファイルが読み取られ、次に補助スタイル (つまり、Toggle スタイルが必要な場合)、white.css。
ブラウザに「style」スタイル Cookie レコードがない場合、または「style」スタイル Cookie レコードが「white」の場合、テーマは最初にwhite.css ファイルを読み取り、次に black.css ファイルを読み取ります。
ここで追加する必要があるのは、PHP を使用して Cookie を読み取る方が、js を使用して Cookie を読み取るよりも効果的であるということです。もともとクッキーの読み込みにjsを使っていたのですが、やはりjsの読み込みに時間がかかるため、スタイル切り替え後のページ閲覧が完璧ではありません。以前に、黒のテーマを選択してページを閲覧すると、しばらくの間白のテーマが表示され、その後黒のテーマが表示されることが判明した場合があります。これが私が説明したいことです。 PHP コードを使用するようになったので、この欠点はなくなりました。
3. コードの Javascript 部分: (Web サイトですでに JQuery ライブラリを呼び出していることに注意してください)

コードをコピーコードは次のとおりです: (function($)

{

$(document).ready(function() {
$('.styleswitch').click( function() {
$('body').append('

');
$('#overlay')
.css({
表示: 'なし'、
位置: '絶対'、
上: 0、
左: 0、
幅: '100%'、
高さ: '2000%'、
zIndex: 1000,
背景: '黒'
})
.fadeIn(500);
switchStylestyle(this.getAttribute("rel")); #overlay' ).fadeOut(500);
return false
});
関数 switchStylestyle(function() {
$) ('link [@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this .disabled = false;},
createCookie('style', styleName, 365);

上記の部分はクリックアクション部分です。切り替えプロセス中にライトボックス効果を作成するために、中央に #overlay ブロックスタイルのセクションを追加しました。これは、突然の切り替えよりも自然になります。
次に、Cookie レコードを生成する関数コードも追加する必要があります。

コードをコピーします

コードは次のとおりです。

 
function createCookie(name,value,days) 
{ 
if (days) 
{ 
var date = new Date(); 
date.setTime(date. getTime() (日*24*60*60*1000)); 
var 期限切れ = "; 期限切れ = date.toGMTString(); 
else var 期限切れ = ""; document.cookie = name "=" valueexpires "; path=/"; 
} 

 
Cookie レコードを追加および削除する関数コードもあります: 

コードをコピーしますコードは次のとおりです:

function EraseCookie(name)

{ 
createCookie(name, "",-1) ; 
} 

 
以上の 3 つの部分を完了してください。皆さんは理解できると思います。