Пример анализа функции имитации изменения темы Baidu с использованием Bootstrap и jQuery

Применениефункцииизменениявнешнеговидашироко,будьтодляпоисковойинтерфейсилиобычнойадминистративнойинтерфейс ит.д.,можноразработатьиприменитьфункциюизменениявнешнеговида,чтобыполучитьлучшийопытпользователя.　

СегодняподражаюфункцииизменениявнешнеговидаBaidu,реализовалосновныефункцииизменениявнешнеговида,вследующембудетпознакомитьсdejstvijemреализации.ВпроцессеизготовленияинтерфейсавыпользовалфреймворкBootstrap,чтобылучшевсегоадаптироватьсяподэкран.(Конечно,длялучшегознакомстваиспользованиемэтогофреймворка,не забудьтевввестиcssиjsпакетыBootstrap框架).Впроцессесозданияпроекталучшеотдельноразделитьcss,js,images.　

Сначалаlayout,я только нарисовалпростойinterfaceизменениявнешнеговида,вкотороместьнекоторыекнопкииизображения,чтобыпросто реализовать,внешниеизображенияизменениявнешнеговидаявляютсяпрямоизбранными,используятеги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().　

Я предпочитаю第二种 способ, поэтому в коде используется второй способ.　

Как реализовать切换 фонового изображения при нажатии на изображение? На самом деле это просто обработка стиля, как изменить фоновое изображение и как его отображать. Тогда возникает вопрос, как получить текущее нажатое или выбранное изображение? Через получение属性的 src изображения, чтобы получить путь к изображению, jQuery может использовать метод attr() для получения. Например:　

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

this указывает на объект изображения, на которое было сделано текущее鼠标 нажатие.

Чтобы обновить страницу, не изменяя фоновое изображение, я использовал html5 localStorage для хранения. Самый常用ный метод - 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#oldtoolbag.com (во время отправки письма замените # на @) для подачи жалобы и предоставления соответствующих доказательств. При подтверждении факта нарушения авторских прав сайт незамедлительно удаляет涉嫌侵权的内容.