Bootstrap 프레임워크와 jQuery를 사용하여 Baidu 스킨 변경 기능 예제 분석

스킨 교체 기능의 응용 범위는 매우 넓습니다. 검색 인터페이스에서도 일반 관리 인터페이스 등에서도 디자인하고 스킨 교체 기능을 적용하여 더 나은 사용자 경험을 제공할 수 있습니다.　

오늘 베이도우의 스킨 교체 기능을 모방하여 기본 스킨 교체 기능을 구현했습니다. 다음에는 이를 구현하는 방법에 대해 소개하겠습니다. 인터페이스 설계 과정에서 Bootstrap 프레임워크를 사용하여 화면에 더 잘 적응할 수 있도록 했습니다. (물론 이 프레임워크를 더 잘 사용하려면, Bootstrap 프레임워크의 css와 js 패키지를 가져오지 않은 것을 잊지 마세요). 프로젝트를 생성할 때는 css, js, images를 별도로 분리하는 것이 좋습니다.　

먼저 레이아웃을 설명하겠습니다. 저는 간단한 스킨 교체 인터페이스를 레이아웃했고, 그 중에는 몇 가지 버튼과 이미지가 있습니다. 간단하게 구현하기 위해 스킨 교체의 배경 이미지는 직접 선택했습니다. ul li 태그를 사용하여 레이아웃을 설정했습니다. 물론 원래의 div 레이아웃도 사용할 수 있습니다.　

<div class="container">}-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">보상 상자</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">스킨 변경</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">메시지</a></div>
 </div>
 <div class="s-icons">
 <div class="s-icons-bottom">
  <div class="icon-items">
  <ul>
   <li><a href="javascript:;">인기</a></li>
   <li><a href="javascript:;">게임</a></li>
   <li><a href="javascript:;">캐릭터</a></li>
   <li><a href="javascript:;">스타</a></li>
   <li><a href="javascript:;">경치</a></li>
   <li><a href="javascript:;">간단한</a></li>
   <li><a href="javascript:;">신선한</a></li>
   <li><a href="javascript:;">사용자 정의</a></li>
  </ul>
  </div>
  <div class="icon-up">
  <div>
   <i class="glyphicon glyphicon-arrow-up"></i>
   <a href="javascript:;">접기</a>
  </div>
  </div>
  <div style="clear: both"></div>
  <div class="icon-bottom">
  <ul>
   <li class="col-lg-1 col-lg-offset-1 dpic><img src="images/0.jpeg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/1.jpeg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/2.png" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/3.jpg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/4.jpg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/5.jpg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/6.jpeg" title="[#1#]\/li>
  </ul>
  </div>
 </div>
 </div>

다음은 외관을 장식하는 방법입니다. 간단한 인터페이스를 좋아합니다.

부록 css 코드:　

*{
 margin:0px;
 padding:0px;
 font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.b-icons{
 background-color: #569caa;
 height: 32px;
 line-height: 32px;
}
.b-icons .b-icons-item{
 float: left;
}
.b-icons #b-box{
 margin-left: 10%;
}
.b-icons #b-change,.b-icons #b-msg{
 margin-left:20px;
}
.b-icons #b-box,.b-icons #b-change,.b-icons #b-msg{
 text-decoration:underline;
}
.b-icons #b-box a,.b-icons #b-change a,.b-icons #b-msg a{
 font-size: 12px;
 color:#fff;
}
.s-icons{
 width: 100%;
 position: fixed;
 left: 0px;
 top:0px;
 background-color: #fff;
 height: 175px;
 display: none;
}
.s-icons .s-icons-bottom{
 width: 100%;
 height: 35px;
 border-bottom: 1px solid #808080;
}
.s-icons .icon-items{
 margin-left:15%;
}
.s-icons .icon-items>ul li{
 height: 30px;
 line-height: 30px;
 float: left;
 list-style: none;
 margin-left:10px;
 margin-right:10px;
}
.s-icons .icon-items a{
 color:#666;
}
.s-icons .icon-up{
 line-height: 30px;
 float: right;
 margin-right:10%;
}
.s-icons .icon-up>div a,.s-icons .icon-up>div i{
 color: #2544ff;
}
.s-icons .icon-bottom{
 width: 100%;
 height: 100px;
 margin-left: 15%;
 margin-top:20px;
}
.s-icons .icon-bottom .dpic{
 text-align: center;
 list-style: none;
 margin-left: 5px;
}
.s-icons .icon-bottom .dpic img{
 width: 120px;
 height:80px;
}

마지막 부분은 매우 중요합니다. 즉, 이미지 전환을 구현하는 jQuery 코드를 작성하는 방법입니다。

스킨을 클릭할 때, 카테고리와 닫기 버튼이 포함된 인터페이스가 전환됩니다. 닫기 버튼을 클릭하면 인터페이스가 닫히는 효과가 생깁니다. 이 기능을 구현하려면 다음과 같이 합니다：세 가지 방식자신이 원하는 방식을 선택할 수 있습니다：　

1)slidedown()와 slideup();　

2)show()와 hide();　

3)fadeOut()와 fadeIn().　

저는 두 번째 방식을 더 좋아하기 때문에 코드에서 두 번째 방식을 사용했습니다。　

이미지를 클릭하면 배경 이미지가 어떻게 전환되는지, 실제로는 단순한 스타일 처리에 관련된 문제입니다. 배경 이미지를 어떻게 변경할지, 그리고 배경 이미지의 표시 문제입니다. 그런 다음 문제가 생깁니다. 현재 클릭하거나 선택한 이미지를 어떻게 얻을 수 있을까요? img의 src 속성을 가져와 이미지 경로를 얻을 수 있습니다. jQuery는 attr() 메서드를 사용하여 가져올 수 있습니다. 즉：　

　var src = $(this).attr("src");

this는 현재 마우스 클릭한 이미지 객체를 의미합니다。

페이지를 새로고침할 때 배경 이미지가 변경되지 않도록 하기 위해 html을 사용했습니다：5localStorage에 저장됩니다. 가장 많이 사용되는 방법은 getItem()과 setItem() 메서드입니다：　

var bgig = localStorage.getItem("bgig");

localStorage.setItem("bgig", src);

전체 기능의 구현 과정은 다음과 같습니다：

 $(function () {
 var bgig = localStorage.getItem("bgig");
 if (bgig == null) {
 $("body").css({ "background-image": "url(images/1.jpeg)", "background-size": "cover" });
 }
 else {
 $("body").css({ "background-image": "url(" + bgig + ")", "background-size": "cover" });
 }
 $("#b-change a").click(function () {
 $(".s-icons").show(500);
 });
 $(".icon-up a").click(function () {
 $(".s-icons").hide(500);
 });
 $(".dpic img").click(function () {
 var src = $(this).attr("src");
 $("body").css({ "background-image": "url(" + src + ")","background-repeat":"no",-repeat","background-size":"100%" });
 localStorage.setItem("bgig", src);
 });
});

이미지 효과:

이것이 이 문서의 모든 내용입니다. 여러분의 학습에 도움이 되길 바랍니다. 또한,呐喊 교본에 많은 지지를 부탁드립니다.

추가로 심화 학습하고 싶다면 여기를 클릭하여 학습할 수 있습니다. 또한, Bootstrap 학습 교본, Bootstrap 실전 교본 두 가지 흥미로운 주제를 추가합니다.

언급: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자에게 소유되며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 문제가 의심되는 내용이 있으면, 이메일로 notice#w에 보내 주세요.3codebox.com에 이메일을 보내면 (#을 @으로 변경하십시오) 신고하시고 관련 증거를 제공하십시오. 사실이 확인되면, 이 사이트는 즉시 의심스러운 저작권 내용을 삭제합니다.