카멜레온 사이트, 색상 선택기로 사이트 색상 변경

배경과 이미지 색상이 사용자가 변경할 수있는 사이트를 디자인하는 방법을 배우고 싶습니다. MSN, YAHA 등의 사이트에서는 녹색, 파란색, 흰색 등 4 가지 색상 내에서 색상이 한 가지 색상으로 만 바뀔 수 있습니다. 그러나 그 이미지에는 그림자 나 그라디언트 오버레이와 같은 효과가 없었습니다. 그러나 그림자, 그라디언트 오버레이와 같은 효과를 적용한 이미지의 색상을 변경하고 싶습니다. 또한, 각 색상. 카멜레온처럼.카멜레온 사이트, 색상 선택기로 사이트 색상 변경

상단 오른쪽에 텍스트 링크를 넣을 수 있습니다. 사용자가이 링크를 클릭하면 Photoshop과 같은 색상 선택기가 열립니다. 색상 선택기는 선택한 색상에 따라 16 진 코드를 생성합니다. 사용자가 선택한 사이트의 색상이 색상으로 변경됩니다.

JavaScript DOM을 사용하여 투명한 이미지 배경색을 변경했습니다. 이미지의 투명 영역 색상은이 이미지가 포함 된 div 태그의 배경색과 동일합니다. 그러나 이미지에 그림자, 오버레이 등과 같은 효과가있는 경우 변경되는 색상은 비활성화됩니다.

내가 할 수있는 방법은 무엇이며, 어떤 기술을 사용할 것인가, jQuery, Ajax? 색상을 변경할 수있는 사이트를 만드는 방법. 사용자가 색상을 변경할 수있는 사이트를 만드는 방법은 무엇입니까? 당신은 약간의 지식으로 시작하는 경우 그냥 카멜레온 같은

...

출처

2011-02-09 Maozturk

흠, 그럼이 구현하는 데 다소 시간이 걸릴 수 있습니다.

내 제안은 사용자가 선택한 항목에 따라 body 요소의 클래스를 변경하는 javascript를 갖는 것입니다. 그래서 내가 페이지를 방문하고, <body> 태그에는 클래스가없고, 기본 CSS가 사용된다고 가정 해 봅시다.

그런 다음 링크를 클릭하여 항목을 빨간색으로 바꿉니다. 자바 스크립트 또는 jquery를 사용하여 본문에 "red-body"클래스를 지정합니다.

스타일 시트에이 클래스의 요소 하위 요소 인 CSS 만 사용하십시오.

#navigation li{color:#000;} 
.red-body #navigation li{color: #af000;}

이이 가능하게됩니다

Html: 
<a href="" class="go-red">Go Red</a> 

jQuery 
$('.go-red').click(function(){$('body').removeClass();$('body').addClass('red-body');});

그래서 당신은 코드가 같은 경우. 이것은 하나의 스타일 시트만으로 모든 것을 할 수 있다는 것을 의미합니다. 가장 좋은 방법이라고 생각합니다.

사용자 선택 사항을 저장하는 데는 여러 가지 방법이 있습니다. 가장 쉬운 방법 중 하나는 브라우저에 쿠키를 설정하는 것입니다. 자바 스크립트로이 작업을 수행 할 수 있습니다. w3schools의 소개 : http://www.w3schools.com/JS/js_cookies.asp

출처

2011-02-10 17:58:50 daveyfaherty

카멜레온 사이트, 색상 선택기로 사이트 색상 변경

답변

관련 문제