JavaScript 스킨 케 어 기능 구현

1.js 스킨 케 어 의 기본 원리
기본 원 리 는 간단 하 다.JS 를 사용 하여 대응 하 는 CSS 스타일 시트 파일 을 전환 하 는 것 이다.예 를 들 어 네 비게 이 션 사이트 Hao 123 의 오른쪽 위 에 홈 페이지 스킨 케 어 기능 이 있다.CSS 스타일 시트 파일 을 전환 하 는 것 외 에 도 일반적인 웹 스킨 케 어 는 쿠키 를 통 해 사용자 가 이전에 바 꾼 피 부 를 기록 해 야 다음 사용자 가 방문 할 때 마지막 사용자 설정 옵션 을 자동 으로 사용 할 수 있다.그러면 기본 적 인 작업 절차 가 나 옵 니 다.웹 페이지 를 방문 하 십시오.JS 에서 쿠키 를 읽 습 니 다.없 으 면 기본 피 부 를 사용 합 니 다.있 으 면 지 정 된 피 부 를 사용 합 니 다.사용 자 는 스킨 교환 옵션 인 JS 제어 교체 에 대응 하 는 CSS 스타일 시트 를 클릭 하여 스킨 옵션 을 Cookie 에 기록 하여 저장 합 니 다.

2.사전에 필요 한 준비 작업
1.서로 다른 피 부 는 서로 다른 css 파일 에 대응 하고 css 스타일 파일 을 여러 세트 준비 합 니 다.
파란색 대응:skinColourblue.css
노란색 대응:skinColouryellow.css
2.그림 은 서로 다른 피부 폴 더 에 저 장 됩 니 다.
예 를 들 어 파란색 대응:blue 폴 더;노란색 대응:yellow 폴 더.
서로 다른 피부 색 의 그림 을 해당 하 는 폴 더 에 넣 고 그림 전환 원리:스킨 전환 함수 에 img 태그 의 src 경로 속성 을 설정 하여 그림 을 전환 합 니 다.
3.피부 교환 이 실현 되 는 과정
1.웹 페이지 시작 에 css 파일 도입

<link href="Content/aps/skinNone.css" rel="external nofollow" rel="stylesheet" type="text/css" id="skinColour" />

2,페이지 에 피부 전환 버튼 2 개 정의

<span class="skin-btn-blue" onclick="changeSyle('blue');" >  </span>
<span class="skin-btn-yellow" onclick="changeSyle('yellow');" >  </span>

3.js 코드 에서 함수 트리거 를 통 해탭 을 전환 하 는 css 경로 와 그림 의 경 로 를 통 해 피 부 를 바 꿉 니 다.

//     css  <link>     
var cssStyle = document.getElementById('skinColour');
//    
function changeSyle(name) {
event.stopPropagation();
cssStyle.href = "Content/aps/skinColour_" + name + ".css";
//     
setStorage("skinName", name);
//       
$('.home-bReturn').attr('src', 'img/' + name + '/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/' + name + '/home_yzl_7.png');
}
//html5      
function setStorage(sname, vul) {
window.localStorage.setItem(sname, vul);
}
function getStorage(attr) {
var str = window.localStorage.getItem(attr);
return str;
}
//      ，     
var cssName = getStorage("skinName");
//        ，         ，       
if (cssName && cssName != null) {
cssStyle.href = "Content/aps/skinColour_" + cssName + ".css";
//      
$('.home-bReturn').attr('src', 'img/' + cssName + '/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/' + cssName + '/home_yzl_7.png');
}else{
//       blue     
cssStyle.href = "Content/aps/skinColour_blue.css";
//        
$('.home-bReturn').attr('src', 'img/blue/home_yzl_8.png');
$('.home-bHome').attr('src', 'img/blue/home_yzl_7.png');
}

넷 째,피부 교환 에 직면 한 문 제 를 정리한다.
1.js 동적 으로 생 성 된 태그 스킨 바 꾸 기,예 를 들 어 jq 는 문자열 을 통 해 페이지 에 추 가 된 img 이미지 태그
1)로 컬 저장 소 를 통 해 피부 이름 함 수 를 가 져 와 피부 이름 값 을 가 져 와 이 값 이 있 는 지 여 부 를 판단 하고 있 으 면 피부 이름 을 가 져 오고 값 을 가 져 오지 않 으 면 기본 블 루 블 루

//html5        
  var cssName2 = getStorage("skinName");
  //     ,      
  var imgSrcCinema;
  if (cssName2 && cssName2 != null) {
    imgSrcCinema = cssName2;
  } else {
    imgSrcCinema = 'blue';
  };

2)js 동적 으로 생 성 된 곳 에서 쓰기:문자열 연결,+변 수 를 통 해 구현

   var liImg = '<div class="film-vidctn3"><img class="videoimg" src="../../img/' + imgSrcCinema + '/cinema-yzl_09.png"></div>';
    $("." + pos).html(liImg);

 2,버튼 을 누 르 면 변색 효과 로 피부 변신:
서로 다른 css 파일 에서 같은 이름 의 class 를 정의 할 수 있 으 며,스타일 은 피부 에 따라 각각 작성 할 수 있 습 니 다.
예 를 들 어 파란색 피부 스킨 Colourblue.css

/*js      */
.zhleftclick{
  background-color: rgba(0, 201, 212, 0.5) !important;
}

노 란 피부 에 스킨 컬러yellow.css

/*1,js      */
.zhleftclick{
  background-color: #43490f !important;
}

js 에 클 라 스 를 추가 하면 피부 에 따라 클릭 효 과 를 해결 할 수 있 습 니 다.원 리 는 피부 상태 에 따라 인 용 된 피부 css 파일 이 다 르 기 때 문 입 니 다.

 $('.icon01').off('mousedown touchstart').on('mousedown touchstart', function () {
      $('.icon01').removeClass('zhleftclick').addClass('zhleftclick');
  })

3,다른 클릭 변색 효과 스킨 케 어:
먼저 로 컬 저장 소 를 통 해 피부 이름 을 얻 고 색상 변 수 를 정의 하여 서로 다른 피부 이름 을 판단 하여 변수의 내용 을 바 꾸 어 서로 다른 피부 에서 의 클릭 효 과 를 얻 습 니 다.

  //html5        
  var cssName2 = getStorage("skinName");
  //    
  var colorBright; //       
  if (cssName2 && cssName2 != null) {    
    if (cssName2 == "blue") {
      colorBright = "rgb(226, 109, 73)";
    } else if (cssName2 == "yellow") {
      colorBright = "#acbf04";
    } else if (cssName2 == "red") {
    }
  } else {
    //    ，     blue
    colorBright = "rgb(226, 109, 73)";
  };
$("#ul input:eq(0)").attr("data-num", "1").css({ background: "" + colorBright + "" });

총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 자 바스 크 립 트 의 스킨 케 어 기능 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!