前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）

需求：

①写一个web版的360工具箱，示意图如下：

②无左上返回按钮，右上按钮有皮肤切换，下拉框（但无点击逻辑）；

③按钮点击有事件，但事件是console.log(按钮名)；

④可以在全部工具和我等工具自由切换；

⑤可以点击左下角的编辑，然后根据实际表现设置；

⑥可以在全部工具里面，点击按钮，然后添加到我的工具这边来；

⑦效果尽量与原图相同，只使用jquery库；

效果网址：

http://jianwangsan.cn/toolbox

（一）tab页切换，包含内容区

①切图：

先切图，如图：（不想用他的绿色的）

再切按钮图（自行ps）：（下图白色，所以直接是看不见的）

②页面制作：

html：我这里发的是jade版，如果需要看html版的话，请打开demo的网址：http://jianwangsan.cn/toolbox，然后查看源代码自行复制

    link(rel='stylesheet', href='./stylesheets/toolboxes.css')script(type="text/javascript",src='javascripts/toolboxes.js')div.backdiv.tooltopdiv.tooltop-imgdiv.toolTabdiv.tool#alltoolspan.img.alltool.selectspan.text    全部工具div.hoverdiv.tool#mytoolspan.img.mytoolspan.text    我的工具div.contentboxdiv.toolbox-alldiv.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;width: 100%;background-color: white;position: relative;
}.back .tooltop-img {height: 100%;width: 100%;background-image: url(../img/toolboxBackground.png);background-size: cover;
}.back .toolTab {position: absolute;left: 0;bottom: 10px;height: 35px;width: 100%;
}.back .toolTab .tool {margin-left: 20px;width: 140px;height: 100%;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;position: relative;-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;display: inline-block;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;background-color: white;position: absolute;bottom: -2px;left: 0;
}.back .contentbox {position: absolute;top: 120px;bottom: 0;left: 0;right: 0;background-color: white;
}.back .contentbox > div {width: 100%;height: 100%;
}.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上时，才会移动if (!($(this.children[0]).hasClass("select"))) {var self = this;var node = $(".tool .hover");var start = null;var end = null;var tools = $(".toolTab")[0].childrenfor (var i = 0; i < tools.length; i++) {if (self == tools[i]) {end = i;} else if ($(".select")[0].parentNode == tools[i]) {start = i;}}//停止之前的动画if ('stop' in node) {node.stop();}//现在开始动画效果node.animate({"left": (end - start) * 160 + "px"})}})};this.tabMouseLeave = function () {$(".tool").mouseleave(function () {//只有当鼠标移动到非当前选中的tab上时，才会移动if (!($(this.children[0]).hasClass("select"))) {var node = $(".tool .hover");//停止之前的动画if ('stop' in node) {node.stop();}node.animate({"left": "0px"})}})}
}

到目前为止，tab按钮的动画和切换可以了，页面也可以正常切换了。

当然，目前页面颜色用的是纯色来站位，之后会修改

前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）相关推荐

前端的小玩意（9.5）——做一个仿360工具箱的web页面（完结篇，可以跑起来的工具箱）
前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小 ...
前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）
前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小 ...
前端的小玩意（9.2）——做一个仿360工具箱的web页面（全部工具里面的模板）
上一篇链接: http://blog.csdn.net/qq20004604/article/details/52216203 DEMO: http://jianwangsan.cn/toolbox ...
EonerCMS——做一个仿桌面系统的CMS（二）
上一周我说到,我要开始做一个仿桌面系统的CMS.现在,一周过去了,来做个小小的总结吧,顺便把上一周片尾留的小问题解答下. 桌面关于界面,思前想后,还是模仿115的了,说是模仿,其实几乎是照搬.因为我 ...
现学现卖做一个炫酷的动态背景页面
很喜欢酷炫的页面,自从看了抖音的主页之后(如下)(链接),就决定要也做一个牛逼的动态背景页面对...背景是视频,而且还有音效,太牛逼了然后决定自己做一个,废话不说,先弄代码: 这里为了设计简便,用 ...
开博第一篇作品-C#winform版《仿360杀毒》页面切换动画效果(内含源码)
C#winform版 <仿360杀毒>页面切换动画效果昨天跟一个同事聊天,谈到了360杀毒的页面效果不错,我们所做的winform页面都是拖控件还是拖控件,不能吸引客户的注意力,想改成3 ...
用HTML➕CSS做一个漂亮的个人博客页面
用html+css设计个人博客网页,纯静态页面前几周我们让做了一个个人博客页面,怎么说,刚接触前端不久,第一次做页面刚开始选择的都是大红大紫的颜色,导致整合页面很low,后来看了些抽象绘画,决定用上 ...
23|VS2017 基于MFC 做一个音乐播放器，带音量调节，切换歌曲
最近接到个小任务,用MFC做一个音乐播放器,不过这也是一直想尝试的,于是今天早上9点到下午16:00,总算是完成了需要的功能开门见山,先展示一下整体界面下面按照功能模块介绍我做这个播放器的过程预 ...
php播放一个提示音,ajax实现web页面的消息实时提醒时播放提示音
在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音. 这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在 ...

前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）

需求：

（一）tab页切换，包含内容区

前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）相关推荐

最新文章

热门文章