JQuery 프런트엔드 전환 웹사이트 스타일 구현_javascript 기술

그러나 방문자가 선택할 수 있도록 웹 사이트에 더 많은 스타일을 추가하려는 경우 또는 웹 사이트의 스타일을 조정하고 방문자가 결정을 내리기 전에 반영하도록 하려는 경우에도 이 방법은 테마를 모두 전환하지 않아도 되는 좋은 방법입니다. 시간.
전환 효과는 이 사이트를 참고하세요.
1. 스타일 전환 버튼 코드:

코드 복사 코드는 다음과 같습니다.

< ;div id="style-switch">

• 낮


• 밤< ;/ li>
  

위의 버튼 코드를 웹사이트 디자인에 맞게 배치하세요. 예를 들어 내 경우에는 header.php 파일에 배치됩니다.
2. 스타일 참조 코드:

코드 복사 코드는 다음과 같습니다.

< link rel= "alternate stylesheet" type="text/css" href="/black.css" title="black" media="screen" /> 🎜>< ;?php endif;>

여기서 간단히 설명하겠습니다.
다음 js에서는 쿠키 레코드 "스타일"이 작성되기 때문입니다. 따라서 여기서는 브라우저가 기록에 따라 스타일을 호출하도록 하겠습니다(여기에는 두 가지 스타일이 있습니다. 하나는 "흰색"이고 다른 하나는 "검은색"입니다).
브라우저에 "style"이라는 쿠키 기록이 있고 이를 "black"으로 기록하면 먼저 기본 스타일 파일이라고 할 수 있는 black.css 파일을 읽은 다음 보조 스타일( 즉, 토글 스타일이 필요한 경우), white.css입니다.
브라우저에 "스타일" 스타일 쿠키 기록이 없거나 "스타일" 스타일 쿠키 기록이 "white"인 경우 테마는 먼저 white.css 파일을 읽은 다음 black.css 파일을 읽습니다.
여기서 추가해야 할 점은 PHP를 사용하여 쿠키를 읽는 것이 js를 사용하여 쿠키를 읽는 것보다 더 효과적이라는 것입니다. 원래 쿠키를 읽는 데 js를 사용했는데, 여전히 js를 로드하는 데 시간이 걸리기 때문에 스타일 전환 후 페이지 탐색이 완벽하지 않습니다. 이전에 검정색 테마를 선택한 후 페이지를 탐색하면 잠시 동안 흰색 테마가 나타났다가 검정색 테마가 나타나는 것을 발견한 경우가 있습니다. 이것이 제가 설명하고 싶은 것입니다. 이제 PHP 코드를 사용하면 이 단점이 더 이상 존재하지 않습니다.
3. 코드의 Javascript 부분: (웹사이트에서 이미 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;
})
})
function switchStylestyle(styleName)
{setTimeout() {
$ ('링크 [@rel*=style][제목]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this .disabled = false;
});}, 500)
createCookie('style', styleName, 365)
}
})(jQuery); 🎜>
위 부분은 클릭 액션 부분입니다. 전환 과정에서 라이트박스 효과를 내기 위해 중간에 #overlay 블록 스타일 섹션을 추가했는데, 이는 갑작스러운 전환보다 더 자연스럽습니다.
그런 다음 쿠키 기록을 생성하는 함수 코드도 추가해야 합니다.

코드 복사 코드는 다음과 같습니다.

function createCookie(이름,값,일)
{
if (일)
{
var date = new Date()
date.setTime(date. getTime() (일*24*60*60*1000));
varexpires=";date.toGMTString();
}
else varexpires=""; document.cookie = name "=" 값 만료 "; path=/";
}

쿠키 레코드를 추가하고 삭제하는 함수 코드도 있습니다:

코드 복사 코드는 다음과 같습니다.

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

이상입니다. 위의 세 부분을 모두 이해하시기 바랍니다.