①寫一個web版的360工具箱，示意圖如下：
②無左上傳回按鈕，右上按鈕有皮膚切換，下拉框（但無點選邏輯）；
③按鈕點選有事件，但事件是console.log(按鈕名)；
④可以在全部工具和我等工具自由切換；
⑤可以點選左下角的編輯，然後根據實際表現設定；
⑥可以在全部工具裡面，點選按鈕，然後添加到我的工具這邊來；
⑦效果盡量與原圖相同，隻使用jquery庫；
效果網址：
<a target="_blank" href="http://jianwangsan.cn/toolbox">http://jianwangsan.cn/toolbox</a>
①切圖：
先切圖，如圖：（不想用他的綠色的）
再切按鈕圖（自行ps）：（下圖白色，是以直接是看不見的）
②頁面制作：
link(rel='stylesheet', href='./stylesheets/toolboxes.css')
script(type="text/javascript",src='javascripts/toolboxes.js')
div.back
div.tooltop
div.tooltop-img
div.tooltab
div.tool#alltool
span.img.alltool.select
span.text 全部工具
div.hover
div.tool#mytool
span.img.mytool
span.text 我的工具
div.contentbox
div.toolbox-all
div.toolbox-my.displaynone
css：
a[href='/toolbox'] {
color: #555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.back {
height: 600px;
width: 100%;
position: relative;
-webkit-box-shadow: 0px 0px 2px #555;
-moz-box-shadow: 0px 0px 2px #555;
box-shadow: 0px 0px 2px #555;
.back * {
border: 0;
padding: 0;
margin: 0;
.back .tooltop {
height: 120px;
background-color: white;
.back .tooltop-img {
height: 100%;
background-image: url(../img/toolboxbackground.png);
background-size: cover;
.back .tooltab {
position: absolute;
left: 0;
bottom: 10px;
height: 35px;
.back .tooltab .tool {
margin-left: 20px;
width: 140px;
line-height: 30px;
color: white;
font-size: 22px;
font-weight: 900;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.back .tooltab .tool .img {
height: 27px;
width: 27px;
background-repeat: no-repeat;
vertical-align: middle;
background-image: url(../img/toolbox.png);
.back .tooltab .tool .img.alltool {
background-position: 0 0;
.back .tooltab .tool .img.alltool.select {
background-position: 0 -50px;
.back .tooltab .tool .img.mytool {
background-position: -40px 0;
.back .tooltab .tool .img.mytool.select {
background-position: -40px -50px;
.back .tooltab .tool .text {
.back .tooltab .hover {
height: 2px;
width: 125px;
bottom: -2px;
.back .contentbox {
top: 120px;
bottom: 0;
right: 0;
.back .contentbox > div {
.back .contentbox .toolbox-all {
background: red;
.back .contentbox .toolbox-my {
background: green;
javascript：
$(document).ready(function () {
//這裡是點選切換顯示頁面
var toolboxtab = new tab();
toolboxtab.tabclick();
toolboxtab.tabmouseenter();
toolboxtab.tabmouseleave();
})
var tab = function () {
//以下代碼大量考慮到擴充性，例如，可以新增一個tab和content頁面
this.tabclick = function () {
$(".tool").click(function () {
//這裡是上面的圖示的邏輯變換
if (!($(this.children[0]).hasclass("select"))) {
$(".select").removeclass("select");
$(this.children[0]).addclass("select");
//這裡是hover的橫線的位置變化
var node = $(".tool .hover");
node.remove();
//當動畫需要停止的時候，讓他停止
if ('stop' in node) {
node.stop();
}
node.css("left", "0px");
$(this).append(node);
//以下應該是切換頁面的邏輯
//擷取切換到哪一個頁面，
var index = null;
for (var i = 0; i < this.parentnode.children.length; i++) {
if (this == this.parentnode.children[i]) {
index = i;
}
$(".contentbox > div").addclass("displaynone");
$(".contentbox > div:nth-child(" + (index + 1) + ")").removeclass("displaynone");
}
})
};
this.tabmouseenter = function () {
$(".tool").mouseenter(function (evt) {
//隻有當滑鼠移動到非目前選中的tab上時，才會移動
var self = this;
var start = null;
var end = null;
var tools = $(".tooltab")[0].children
for (var i = 0; i < tools.length; i++) {
if (self == tools[i]) {
end = i;
} else if ($(".select")[0].parentnode == tools[i]) {
start = i;
//停止之前的動畫
//現在開始動畫效果
node.animate({"left": (end - start) * 160 + "px"})
this.tabmouseleave = function () {
$(".tool").mouseleave(function () {
node.animate({"left": "0px"})
}
到目前為止，tab按鈕的動畫和切換可以了，頁面也可以正常切換了。
當然，目前頁面顔色用的是純色來站位，之後會修改