Analyse de l'exemple de fonctionnalité de change de peau de Baidu combinant le cadre Bootstrap et jQuery

La fonction de changement de thème est très largement utilisée, que ce soit pour l'interface de recherche ou les interfaces de gestion normales, etc., elles peuvent être conçues et appliquées pour améliorer l'expérience utilisateur.　

Aujourd'hui, j'ai imité la fonction de changement de thème de Baidu et réalisé la fonction de base de changement de thème. Ensuite, je vais vous présenter comment réaliser cela. Pendant le processus de conception de l'interface, j'ai utilisé le cadre Bootstrap pour mieux s'adapter à l'écran. (Bien sûr, c'est aussi pour mieux m'habituer à utiliser ce cadre, n'oubliez pas d'importer les fichiers css et js du cadre Bootstrap, s'il vous plaît). Il est préférable de séparer les fichiers css, js et images lors de la création du projet.　

Tout d'abord, il s'agit de l'agencement, je n'ai fait qu'agencer une interface simple de changement de thème, composée de quelques boutons et d'images. Pour une mise en œuvre simple, les images de fond de changement de thème sont sélectionnées directement, et l'agencement est réalisé directement à l'aide des balises ul li. Bien sûr, il est également possible d'utiliser l'agencement div original.　

<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;
}

La dernière partie est très importante, c'est-à-dire comment écrire le code jQuery pour réaliser le changement d'image.

Lorsque vous cliquez pour changer de skin, une interface est basculée, qui contient les catégories de skins et le bouton de repliement. Lorsque vous cliquez sur replier, l'interface a un effet de repliement. Pour réaliser cette fonction, il y aTrois méthodesVous pouvez choisir une méthode vous-même :　

1)slidedown() et slideup();　

2)show() et hide();　

3)fadeOut() et fadeIn().　

Ici, je préfère la deuxième méthode, donc le code utilise la deuxième méthode.　

Comment réaliser que l'image de fond puisse être changée en cliquant sur l'image ? En fait, cela ne concerne que le traitement de style, c'est-à-dire comment changer l'image de fond et comment afficher l'image de fond. Alors, comment obtenir l'image cliquée ou sélectionnée ? On peut obtenir l'attribut src de l'img pour obtenir le chemin de l'image, jQuery peut l'obtenir avec la méthode attr(). C'est-à-dire :　

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

this représente l'objet d'image cliqué actuel.

Pour rafraîchir la page sans changer l'image de fond, j'ai utilisé html5est stocké dans localStorage, la méthode la plus couramment utilisée est getItem() et setItem() :　

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

localStorage.setItem("bgig", src);

Le processus d'implémentation de la fonction complète est le suivant :

 $(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);
 });
});

Illustration :

Voici la totalité de ce contenu de l'article, j'espère qu'il vous aidera dans votre apprentissage, et j'espère que vous soutiendrez également le tutoriel d'encouragement.

Si vous souhaitez approfondir votre apprentissage, vous pouvez cliquer ici pour apprendre, et voici deux sujets passionnants en supplément : Tutoriel de Bootstrap, Tutoriel pratique Bootstrap

Déclaration : Le contenu de cet article est tiré d'Internet, propriété des auteurs respectifs, contribué et téléversé par les utilisateurs d'Internet. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)