久久精品人妻无码一区二区三区,亚洲六月丁香色婷婷综合久久

類型：網(wǎng)頁設(shè)計(jì)大小：50KB語言：中文評(píng)分：5.0
標(biāo)簽：

立即下載

前些天我們學(xué)生在線首頁改版，要做一個(gè)工具欄，由于版面的限制，原先策劃的很多工具只好安排在一個(gè)小區(qū)域里面，具體效果如下：

當(dāng)然，這樣的效果，用html自帶的控件也可以實(shí)現(xiàn)。不過自定義的話就可以自己設(shè)置滑動(dòng)條的樣式啦，比如說設(shè)為紅色、藍(lán)色等，按鈕形狀也可以自己做啦。

需要實(shí)現(xiàn)的效果是，這些工具一次最多在可見區(qū)域顯示9個(gè)（這里假設(shè)工具項(xiàng)總數(shù)多于9個(gè)，不滿9個(gè)的話，將來也很有可能擴(kuò)展到9個(gè)），點(diǎn)擊上下的按鈕即可將可見區(qū)域內(nèi)的工具區(qū)域上下移動(dòng)。

但是這樣做好后，運(yùn)營人員給我提意見了：要是移動(dòng)滑動(dòng)條就可以實(shí)現(xiàn)工具欄上下滑動(dòng)，那用戶體驗(yàn)會(huì)更好，不過說的簡(jiǎn)單，做起來就有點(diǎn)麻煩了。

首先從頭開始講解吧。我的構(gòu)思如下：

整個(gè)區(qū)域分為兩個(gè)，一個(gè)是工具區(qū)域（class=” toolBox”），一個(gè)是滑動(dòng)條區(qū)域（class="slideBar"）。

工具區(qū)域（class=” toolBox”）設(shè)為相對(duì)定位，內(nèi)部有一個(gè)大長(zhǎng)條（class="innerToolBox"），存放所有的工具，一行三個(gè)工具，超出部分不可見（這很關(guān)鍵哦），并且相對(duì)外部工具區(qū)域（class=” toolBox”）是絕對(duì)定位的，剛開始時(shí)，top=0，這樣每次滑動(dòng)只需改變其top值即可。

右邊的滑動(dòng)條區(qū)域（class="slideBar"）有三個(gè)東西：向上按鈕（class="upBtn"）、向下按鈕（class="downBtn"）、滑動(dòng)條框（class="barBox"）�；瑒�(dòng)條框（class="barBox"）僅僅是存放滑動(dòng)條的“盒子”，里面有一個(gè)滑動(dòng)條（class=” innerBar”）。和工具欄類似，滑動(dòng)條（class=” innerBar”）相對(duì)滑動(dòng)條框（class="barBox"）是絕對(duì)定位的，只需改變滑動(dòng)條（class=” innerBar”）的top值即可實(shí)現(xiàn)滑動(dòng)。并且是和左邊的工具條是同步滑動(dòng)的。那么滑動(dòng)條的高度是固定的嗎，當(dāng)然不是，它的高度得由左邊工具的行數(shù)決定。這就需要由js來實(shí)現(xiàn)了（這個(gè)后面會(huì)提到）。

html代碼如下：

1 <div id="smallTools" class="clearfix">
2 <div class="toolBox">
3 <div class="innerToolBox">
4 <ul>
5 <li class="tool1">
6 <a href="#" target="_blank">校車表</a>
7 </li>
8 <li class="tool2">
9 <a href="http://online.cumt.edu.cn/dzhbl/" target="_blank">電子海報(bào)</a>
10 </li>
11 <li class="tool3">
12 <a href="http://lib.cumt.edu.cn/" target="_blank">圖書館</a>
13 </li>
14 </ul>
15 <ul>
16 <li class="tool4">
17 <a href="http://stu.cumt.edu.cn/xgxt" target="_blank">學(xué)生工作系統(tǒng)</a>
18 </li>
19 <li class="tool5">
20 <a href="http://jwchu.cumt.edu.cn/" target="_blank">教務(wù)系統(tǒng)</a>
21 </li>
22 <li class="tool6">
23 <a href="http://service.js.vnet.cn/" target="_blank">網(wǎng)卡查詢</a>
24 </li>
25 </ul>
26 <ul>
27 <li class="tool7">
28 <a href="http://219.219.35.66/index.php" target="_blank">自主學(xué)習(xí)</a>
29 </li>
30 <li class="tool8">
31 <a href="#" target="_blank">新生入口</a>
32 </li>
33 <li class="tool9">
34 <a href="#" target="_blank">焦點(diǎn)視頻</a>
35 </li>
36 </ul>
37 <ul>
38 <li class="tool7">
39 <a href="http://219.219.35.66/index.php" target="_blank">自主學(xué)習(xí)</a>
40 </li>
41 <li class="tool8">
42 <a href="#" target="_blank">新生入口</a>
43 </li>
44 <li class="tool9">
45 <a href="#" target="_blank">焦點(diǎn)視頻</a>
46 </li>
47 </ul>
48 <ul>
49 <li class="tool7">
50 <a href="http://219.219.35.66/index.php" target="_blank">自主學(xué)習(xí)</a>
51 </li>
52 <li class="tool8">
53 <a href="#" target="_blank">新生入口</a>
54 </li>
55 <li class="tool9">
56 <a href="#" target="_blank">焦點(diǎn)視頻</a>
57 </li>
58 </ul>
59 </div>
60 </div>
61 <div class="slideBar">
62 <a href="#" class="upBtn"> </a>
63 <div class="barBox">
64 <div class="innerBar"></div>
65 </div>
66 <a href="#" class="downBtn"> </a>
67 </div>
68 <div class="clear"></div>
69 </div>

css代碼如下：

1 /***大框***/
2 #smallTools
3 {
4 background:url(../images10/smallBarBg.gif) repeat-x left bottom;
5 position:relative;
6 height:227px;
7 overflow:hidden;
8 }
9
10 /***左右兩邊的布局***/
11 #smallTools .toolBox /***左邊的工具框區(qū)域***/
12 {
13 height:207px;
14 margin-top:10px;
15 float:left;
16 width:237px;
17 margin-left:10px;
18 overflow:hidden;
19 position:relative;
20
21 }
22 #smallTools .slideBar /***右邊的滑動(dòng)條區(qū)域***/
23 {
24 height:227px;
25 float:right;
26 width:11px;
27 }
28
29 /***左框內(nèi)元素的具體樣式***/
30 .innerToolBox
31 {
32 position:absolute;
33 left:0px;
34 top:0px;
35 }
36 #smallTools ul
37 {
38 height:69px;
39 }
40 #smallTools ul li
41 {
42 float:left;
43 width:79px;
44 height:69px;
45 text-align:center;
46 }
47 #smallTools ul li a
48 {
49 display:block;
50 width:79px;
51 height:22px;
52 padding-top:47px;
53 color:#000;
54 }
55 /***以下是給各工具項(xiàng)設(shè)置背景***/
56 #smallTools ul li.tool1
57 {
58 background:url(../images/tool1.gif) no-repeat center 7px
59 }
60 #smallTools ul li.tool2
61 {
62 background:url(../images/tool2.gif) no-repeat center 7px
63 }
64 #smallTools ul li.tool3
65 {
66 background:url(../images/tool3.gif) no-repeat center 7px
67 }
68 #smallTools ul li.tool4
69 {
70 background:url(../images/tool4.gif) no-repeat center 7px
71 }
72 #smallTools ul li.tool5
73 {
74 background:url(../images/tool5.gif) no-repeat center 7px
75 }
76 #smallTools ul li.tool6
77 {
78 background:url(../images/tool6.gif) no-repeat center 7px
79 }
80 #smallTools ul li.tool7
81 {
82 background:url(../images/tool7.gif) no-repeat center 7px
83 }
84 #smallTools ul li.tool8
85 {
86 background:url(../images/tool8.gif) no-repeat center 7px
87 }
88 #smallTools ul li.tool9
89 {
90 background:url(../images/tool9.gif) no-repeat center 7px
91 }
92
93 /***右邊滑動(dòng)條框的具體樣式***/
94 .slideBar .upBtn /***向上滑動(dòng)按鈕***/
95 {
96 display:block;
97 line-height:0px;
98 width:9px;
99 height:7px;
100 background:url(../images/up_btn.png) no-repeat left top;
101 margin-top:2px;
102 padding:0px;
103 }
104 .slideBar .upBtn:hover
105 {
106 border:1px solid #000000;
107 }
108 .slideBar .downBtn /***向下滑動(dòng)按鈕***/
109 {
110 display:block;
111 line-height:0px;
112 width:9px;
113 height:7px;
114 background:url(../images/down_btn.png) no-repeat left top;
115 margin:0px;
116 padding:0px;
117 }
118 .slideBar .downBtn:hover
119 {
120 border:1px solid #000000;
121 }
122 #smallTools .barBox
123 {
124 height:196px;
125 margin:4px 0px;
126 width:11px;
127 position:relative;
128 }
129
130 .innerBar
131 {
132 position:absolute;
133 width:10px;
134 background:#a4a4a4;
135 cursor:s-resize;
136 top:0px;
137 }

接下來就是給它添加腳本代碼了。為了方便，在這里用的是jQuery庫。

我決定為它建立一個(gè)對(duì)象，大致成員變量如下：

1 $( function()
2 {
3 /***對(duì)象方法，進(jìn)行一些成員變量的賦值
4 變量：elem：要被上下移動(dòng)的工具條區(qū)域名（元素名、id和class的組合）
5 perHight：每一格一次被移動(dòng)的長(zhǎng)度
6 slideN：工具欄中工具的行數(shù)
7 showN：可見的工具的行數(shù)（這里是3）
8 speed：一次移動(dòng)所花的毫秒數(shù)
9 index：可見區(qū)域的第一行的索引
10 barElem：滑動(dòng)條名（元素名、id和class的組合）
11 ***/
12 function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
13 {……}
14 toolBar.prototype=
15 {
16 /***滑動(dòng)條的高度的設(shè)置
17 高度計(jì)算公式：滑動(dòng)條可設(shè)置的最大高度*可見的工具的行數(shù)/工具欄中工具的總行數(shù)
18 ***/
19 initBar:function()
20 {……},
21 /***工具條滑動(dòng)的函數(shù)，to是要被滑動(dòng)到的索引，這函數(shù)在點(diǎn)上下按鈕或移動(dòng)滑動(dòng)條的時(shí)候會(huì)被觸發(fā)***/
22 slide:function(to)
23 {……},
24 /***滑動(dòng)條滑動(dòng)的函數(shù)，to是要被滑動(dòng)到的索引，這函數(shù)在點(diǎn)上下按鈕的時(shí)候會(huì)被觸發(fā)，和slide函數(shù)同步實(shí)現(xiàn)***/
25 barSlide:function(to)
26 {……},
27 /***本函數(shù)為上下按鈕添加點(diǎn)擊事件
28 upelem：向上按鈕的名字（元素名、id和class的組合）
29 downelem：向下按鈕的名字（元素名、id和class的組合）
30 ***/
31 clickTab:function(upelem,downelem)
32 {……},
33 /***拖動(dòng)滑動(dòng)條的函數(shù)，拖動(dòng)后，工具框也進(jìn)行相應(yīng)移動(dòng)。
34 elem：需要被移動(dòng)的元素名（元素名、id和class的組合）
35 handle：使相應(yīng)元素被移動(dòng)所需要拖動(dòng)的把柄元素名（元素名、id和class的組合）
36 uplev：被拖動(dòng)元素最高點(diǎn)（這里是0）
37 downlev：被拖動(dòng)元素的最低點(diǎn)（這里是196）
38 ***/
39 drag:function(elem,handle,uplev,downlev)
40 {……}
41 }
42
43 /***這里進(jìn)行對(duì)象的實(shí)例化，與相關(guān)函數(shù)的調(diào)用***/
44 })

完整的js代碼如下：

View Code

1 $(function()
2 {
3 function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
4 {
5 this.elem=$(elem);
6 this.perHeight=perHeight;
7 this.slideN=slideN;
8 this.showN=showN;
9 this.speed=speed;
10 this.index=index;
11 this.barElem=barElem;
12 }
13 toolBar.prototype=
14 {
15 initBar:function()
16 {
17 var tl=$(this.barElem).parent().height();
18 $(this.barElem).css({'height':tl*this.showN/this.slideN});
19 },
20 slide:function(to)
21 {
22 this.elem.animate({'top':-(to*this.perHeight)},this.speed)
23 },
24 barSlide:function(to)
25 {
26 var tl=$(this.barElem).parent().height();
27 $(this.barElem).animate({'top':tl*to/this.slideN},this.speed)
28 },
29 clickTab:function(upelem,downelem)
30 {
31 var _this=this;
32 $(upelem).bind('click',function()
33 {
34 if(_this.index>0)
35 {
36 _this.index--;
37 _this.slide(_this.index);
38 _this.barSlide(_this.index);
39 }
40 return false;
41 });
42 $(downelem).bind('click',function()
43 {
44 if(_this.index<_this.slideN-_this.showN)
45 {
46 _this.index++;
47 _this.slide(_this.index);
48 _this.barSlide(_this.index);
49 }
50 return false;
51 });
52 },
53 drag:function(elem,handle,uplev,downlev)
54 {
55 var _this=this;
56 var tl=$(this.barElem).parent().height();
57 var C=$(elem);
58 var dy, moveout;
59 var T = $(handle);
60 T.bind("selectstart", function()
61 {
62 return false;
63 });
64 T.mousedown(function(e)
65 {
66 //dx = e.clientX - parseInt(C.css("left"));
67 e=e?e:window.event;
68 dy = e.clientY - parseInt(C.css("top"));
69 C.mousemove(move).mouseout(out).css('opacity', 0.8);
70 T.mouseup(up);
71 });
72 function move(e)
73 {
74 e=e?e:window.event;
75 moveout = false;
76 if((e.clientY - dy)>=uplev&&(e.clientY - dy)<=(downlev-C.height()))
77 C.css({"top": e.clientY - dy});
78 }
79 function out(e)
80 {
81 e=e?e:window.event;
82 moveout = true;
83 setTimeout(function(){checkout(e);}, 100);
84 }
85 function up(e)
86 {
87 e=e?e:window.event;
88 var adaptTop;
89 var presTop=parseInt(C.css("top"));
90 C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1);
91 T.unbind("mouseup", up);
92 //alert(parseInt(_this.slideN));
93 if(((presTop/(tl/_this.slideN))-parseInt(presTop/(tl/_this.slideN)))>=0.5)
94 {
95 _this.index=parseInt(presTop/(tl/_this.slideN))+1;
96 }
97 else
98 {
99 _this.index=parseInt(presTop/(tl/_this.slideN));
100 }
101 adaptTop=_this.index*(tl/_this.slideN);
102 _this.slide(_this.index);
103 C.css({"top":adaptTop});
104 }
105 function checkout(e)
106 {
107 e=e?e:window.event;
108 moveout && up(e);
109 }
110 }
111 }
112
113
114
115 var slength=$("#smallTools .innerToolBox ul").length;
116 var stBox=new toolBar("#smallTools .innerToolBox",69,slength,3,700,0,"#smallTools .innerBar");
117 stBox.initBar();
118 stBox.clickTab("#smallTools .upBtn","#smallTools .downBtn");
119 stBox.drag("#smallTools .innerBar","#smallTools .innerBar",0,196);
120 })