欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條實(shí)現(xiàn)代碼

 更新時(shí)間：2011年04月26日 23:04:00   作者：  
用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條的實(shí)現(xiàn)代碼，需要的朋友可以參考下。

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

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

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

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

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

  1. 整個(gè)區(qū)域分為兩個(gè)，一個(gè)是工具區(qū)域（class=” toolBox”），一個(gè)是滑動(dòng)條區(qū)域（class="slideBar"）。
  2. 工具區(qū)域（class=” toolBox”）設(shè)為相對(duì)定位，內(nèi)部有一個(gè)大長(zhǎng)條（class="innerToolBox"），存放所有的工具，一行三個(gè)工具，超出部分不可見(jiàn)（這很關(guān)鍵哦），并且相對(duì)外部工具區(qū)域（class=” toolBox”）是絕對(duì)定位的，剛開(kāi)始時(shí)，top=0，這樣每次滑動(dòng)只需改變其top值即可。
  3. 右邊的滑動(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”）。和工具欄類(lèi)似，滑動(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來(lái)實(shí)現(xiàn)了（這個(gè)后面會(huì)提到）。

html代碼如下：

復(fù)制代碼 代碼如下:

<div id="smallTools" class="clearfix">
<div class="toolBox">
<div class="innerToolBox">
<ul>
<li class="tool1">
<a href="#" target="_blank">校車(chē)表</a>
</li>
<li class="tool2">
<a target="_blank">電子海報(bào)</a>
</li>
<li class="tool3">
<a target="_blank">圖書(shū)館</a>
</li>
</ul>
<ul>
<li class="tool4">
<a target="_blank">學(xué)生工作系統(tǒng)</a>
</li>
<li class="tool5">
<a target="_blank">教務(wù)系統(tǒng)</a>
</li>
<li class="tool6">
<a target="_blank">網(wǎng)卡查詢(xún)</a>
</li>
</ul>
<ul>
<li class="tool7">
<a target="_blank">自主學(xué)習(xí)</a>
</li>
<li class="tool8">
<a href="#" target="_blank">新生入口</a>
</li>
<li class="tool9">
<a href="#" target="_blank">焦點(diǎn)視頻</a>
</li>
</ul>
<ul>
<li class="tool7">
<a target="_blank">自主學(xué)習(xí)</a>
</li>
<li class="tool8">
<a href="#" target="_blank">新生入口</a>
</li>
<li class="tool9">
<a href="#" target="_blank">焦點(diǎn)視頻</a>
</li>
</ul>
<ul>
<li class="tool7">
<a target="_blank">自主學(xué)習(xí)</a>
</li>
<li class="tool8">
<a href="#" target="_blank">新生入口</a>
</li>
<li class="tool9">
<a href="#" target="_blank">焦點(diǎn)視頻</a>
</li>
</ul>
</div>
</div>
<div class="slideBar">
<a href="#" class="upBtn">&nbsp;</a>
<div class="barBox">
<div class="innerBar"></div>
</div>
<a href="#" class="downBtn">&nbsp;</a>
</div>
<div class="clear"></div>
</div>

css代碼如下：
復(fù)制代碼 代碼如下:

/***大框***/
#smallTools
{
background:url(../images10/smallBarBg.gif) repeat-x left bottom;
position:relative;
height:227px;
overflow:hidden;
}
/***左右兩邊的布局***/
#smallTools .toolBox /***左邊的工具框區(qū)域***/
{
height:207px;
margin-top:10px;
float:left;
width:237px;
margin-left:10px;
overflow:hidden;
position:relative;
}
#smallTools .slideBar /***右邊的滑動(dòng)條區(qū)域***/
{
height:227px;
float:right;
width:11px;
}
/***左框內(nèi)元素的具體樣式***/
.innerToolBox
{
position:absolute;
left:0px;
top:0px;
}
#smallTools ul
{
height:69px;
}
#smallTools ul li
{
float:left;
width:79px;
height:69px;
text-align:center;
}
#smallTools ul li a
{
display:block;
width:79px;
height:22px;
padding-top:47px;
color:#000;
}
/***以下是給各工具項(xiàng)設(shè)置背景***/
#smallTools ul li.tool1
{
background:url(../images/tool1.gif) no-repeat center 7px
}
#smallTools ul li.tool2
{
background:url(../images/tool2.gif) no-repeat center 7px
}
#smallTools ul li.tool3
{
background:url(../images/tool3.gif) no-repeat center 7px
}
#smallTools ul li.tool4
{
background:url(../images/tool4.gif) no-repeat center 7px
}
#smallTools ul li.tool5
{
background:url(../images/tool5.gif) no-repeat center 7px
}
#smallTools ul li.tool6
{
background:url(../images/tool6.gif) no-repeat center 7px
}
#smallTools ul li.tool7
{
background:url(../images/tool7.gif) no-repeat center 7px
}
#smallTools ul li.tool8
{
background:url(../images/tool8.gif) no-repeat center 7px
}
#smallTools ul li.tool9
{
background:url(../images/tool9.gif) no-repeat center 7px
}
/***右邊滑動(dòng)條框的具體樣式***/
.slideBar .upBtn /***向上滑動(dòng)按鈕***/
{
display:block;
line-height:0px;
width:9px;
height:7px;
background:url(../images/up_btn.png) no-repeat left top;
margin-top:2px;
padding:0px;
}
.slideBar .upBtn:hover
{
border:1px solid #000000;
}
.slideBar .downBtn /***向下滑動(dòng)按鈕***/
{
display:block;
line-height:0px;
width:9px;
height:7px;
background:url(../images/down_btn.png) no-repeat left top;
margin:0px;
padding:0px;
}
.slideBar .downBtn:hover
{
border:1px solid #000000;
}
#smallTools .barBox
{
height:196px;
margin:4px 0px;
width:11px;
position:relative;
}
.innerBar
{
position:absolute;
width:10px;
background:#a4a4a4;
cursor:s-resize;
top:0px;
}

接下來(lái)就是給它添加腳本代碼了。為了方便，在這里用的是jQuery庫(kù)。
我決定為它建立一個(gè)對(duì)象，大致成員變量如下：
復(fù)制代碼 代碼如下:

$( function()
{
/***對(duì)象方法，進(jìn)行一些成員變量的賦值
變量：elem：要被上下移動(dòng)的工具條區(qū)域名（元素名、id和class的組合）
perHight：每一格一次被移動(dòng)的長(zhǎng)度
slideN：工具欄中工具的行數(shù)
showN：可見(jiàn)的工具的行數(shù)（這里是3）
speed：一次移動(dòng)所花的毫秒數(shù)
index：可見(jiàn)區(qū)域的第一行的索引
barElem：滑動(dòng)條名（元素名、id和class的組合）
***/
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
{……}
toolBar.prototype=
{
/***滑動(dòng)條的高度的設(shè)置
高度計(jì)算公式：滑動(dòng)條可設(shè)置的最大高度*可見(jiàn)的工具的行數(shù)/工具欄中工具的總行數(shù)
***/
initBar:function()
{……},
/***工具條滑動(dòng)的函數(shù)，to是要被滑動(dòng)到的索引，這函數(shù)在點(diǎn)上下按鈕或移動(dòng)滑動(dòng)條的時(shí)候會(huì)被觸發(fā)***/
slide:function(to)
{……},
/***滑動(dòng)條滑動(dòng)的函數(shù)，to是要被滑動(dòng)到的索引，這函數(shù)在點(diǎn)上下按鈕的時(shí)候會(huì)被觸發(fā)，和slide函數(shù)同步實(shí)現(xiàn)***/
barSlide:function(to)
{……},
/***本函數(shù)為上下按鈕添加點(diǎn)擊事件
upelem：向上按鈕的名字（元素名、id和class的組合）
downelem：向下按鈕的名字（元素名、id和class的組合）
***/
clickTab:function(upelem,downelem)
{……},
/***拖動(dòng)滑動(dòng)條的函數(shù)，拖動(dòng)后，工具框也進(jìn)行相應(yīng)移動(dòng)。
elem：需要被移動(dòng)的元素名（元素名、id和class的組合）
handle：使相應(yīng)元素被移動(dòng)所需要拖動(dòng)的把柄元素名（元素名、id和class的組合）
uplev：被拖動(dòng)元素最高點(diǎn)（這里是0）
downlev：被拖動(dòng)元素的最低點(diǎn)（這里是196）
***/
drag:function(elem,handle,uplev,downlev)
{……}
}
/***這里進(jìn)行對(duì)象的實(shí)例化，與相關(guān)函數(shù)的調(diào)用***/
})

完整的js代碼如下：
復(fù)制代碼 代碼如下:

$(function()
{
function toolBar(elem,perHeight,slideN,showN,speed,index,barElem)
{
this.elem=$(elem);
this.perHeight=perHeight;
this.slideN=slideN;
this.showN=showN;
this.speed=speed;
this.index=index;
this.barElem=barElem;
}
toolBar.prototype=
{
initBar:function()
{
var tl=$(this.barElem).parent().height();
$(this.barElem).css({'height':tl*this.showN/this.slideN});
},
slide:function(to)
{
this.elem.animate({'top':-(to*this.perHeight)},this.speed)
},
barSlide:function(to)
{
var tl=$(this.barElem).parent().height();
$(this.barElem).animate({'top':tl*to/this.slideN},this.speed)
},
clickTab:function(upelem,downelem)
{
var _this=this;
$(upelem).bind('click',function()
{
if(_this.index>0)
{
_this.index--;
_this.slide(_this.index);
_this.barSlide(_this.index);
}
return false;
});
$(downelem).bind('click',function()
{
if(_this.index<_this.slideN-_this.showN)
{
_this.index++;
_this.slide(_this.index);
_this.barSlide(_this.index);
}
return false;
});
},
drag:function(elem,handle,uplev,downlev)
{
var _this=this;
var tl=$(this.barElem).parent().height();
var C=$(elem);
var dy, moveout;
var T = $(handle);
T.bind("selectstart", function()
{
return false;
});
T.mousedown(function(e)
{
//dx = e.clientX - parseInt(C.css("left"));
e=e?e:window.event;
dy = e.clientY - parseInt(C.css("top"));
C.mousemove(move).mouseout(out).css('opacity', 0.8);
T.mouseup(up);
});
function move(e)
{
e=e?e:window.event;
moveout = false;
if((e.clientY - dy)>=uplev&&(e.clientY - dy)<=(downlev-C.height()))
C.css({"top": e.clientY - dy});
}
function out(e)
{
e=e?e:window.event;
moveout = true;
setTimeout(function(){checkout(e);}, 100);
}
function up(e)
{
e=e?e:window.event;
var adaptTop;
var presTop=parseInt(C.css("top"));
C.unbind("mousemove", move).unbind("mouseout", out).css('opacity', 1);
T.unbind("mouseup", up);
//alert(parseInt(_this.slideN));
if(((presTop/(tl/_this.slideN))-parseInt(presTop/(tl/_this.slideN)))>=0.5)
{
_this.index=parseInt(presTop/(tl/_this.slideN))+1;
}
else
{
_this.index=parseInt(presTop/(tl/_this.slideN));
}
adaptTop=_this.index*(tl/_this.slideN);
_this.slide(_this.index);
C.css({"top":adaptTop});
}
function checkout(e)
{
e=e?e:window.event;
moveout && up(e);
}
}
}
var slength=$("#smallTools .innerToolBox ul").length;
var stBox=new toolBar("#smallTools .innerToolBox",69,slength,3,700,0,"#smallTools .innerBar");
stBox.initBar();
stBox.clickTab("#smallTools .upBtn","#smallTools .downBtn");
stBox.drag("#smallTools .innerBar","#smallTools .innerBar",0,196);
})

水平有限，如有錯(cuò)誤，敬請(qǐng)批評(píng)指正。

相關(guān)文章

最新評(píng)論