English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

BootstrapフレームワークとjQueryを組み合わせた百度スキン変更機能の実例解析

スキン変更機能の適用範囲は広く、検索インターフェースや一般的な管理インターフェースなど、さまざまなデザインにスキン変更機能を適用することができ、より良いユーザーエクスペリエンスを提供します。　

今日は百度のスキン変更機能を模倣して、基本的なスキン変更機能を実現しました。その後は、その実現方法について皆さんに紹介します。インターフェースのデザインプロセス中に、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コードをどのように書くかです。

スキンを変更するときに、スキンのカテゴリや折り畳みボタンが含まれるインターフェースが切り替わります。折り畳みをクリックすると、インターフェースが折り畳まれる効果があります。この機能を実現するには、これらの3つの方法好きな方法を選んでください：　

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#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。通報を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害疑いのコンテンツを削除します。）

基本教程
おすすめ