北京網(wǎng)站建設(shè)多年網(wǎng)站建設(shè)經(jīng)驗(yàn),依托強(qiáng)大的服務(wù)優(yōu)勢(shì),為您提供專(zhuān)業(yè)的北京網(wǎng)站建設(shè)服務(wù)
作者:鵬飛網(wǎng)絡(luò) 時(shí)間:2009-4-12 分類(lèi):北京網(wǎng)站建設(shè)
JavaScript 仿Apple產(chǎn)品展示【應(yīng)用技巧】
在仿Apple滑動(dòng)條產(chǎn)品展示效果中,可以看到MaxValue設(shè)成了內(nèi)容容器的scrollWidth和clientWidth之差:
MaxValue: $("idContent").scrollWidth - $("idContent").clientWidth, 其實(shí)這個(gè)值就是內(nèi)容容器scrollLeft的比較大值,這樣在滑動(dòng)時(shí)要設(shè)置的內(nèi)容容器的scrollLeft剛好就是GetValue方法的值了(預(yù)覽效果2也一樣):
onMove: function(){ $("idContent").scrollLeft = this.GetValue(); } 預(yù)覽效果2中,滑塊的高度也特別設(shè)置過(guò):
$("idBar2").style.height = $("idSlider2").clientHeight * Math.min($("idContent2").clientHeight / $("idContent2").scrollHeight, 1) - 4 + "px"; 其實(shí)就是使內(nèi)容跟內(nèi)容容器的高度之比等于滑塊跟滑動(dòng)容器之比,當(dāng)然這個(gè)比不能大于1,否則就滑塊高度就超過(guò)容器高度了,里面的4是邊框?qū)挾取?/P>
這樣的好處是滑塊會(huì)根據(jù)實(shí)際內(nèi)容自動(dòng)設(shè)置大小,就像一般的滾動(dòng)條,內(nèi)容越多滾動(dòng)條就越小,反之就越大,這利于用戶(hù)體驗(yàn)。
ps:仿Apple那個(gè)為了突出效果所以沒(méi)有設(shè)置,實(shí)際應(yīng)用中也應(yīng)該這樣設(shè)置一下。
預(yù)覽效果3中,從GetValue和GetPercent取得的數(shù)有可能是很長(zhǎng)的小數(shù),所以顯示時(shí)必須處理一下。這里看到程序中parseInt使用了兩個(gè)參數(shù),而且第二個(gè)參數(shù)是10,是不是多余的呢?
不是的,因?yàn)槭謨?cè)上說(shuō)了:
如果沒(méi)有提供,則前綴為 '0x' 的字符串被當(dāng)作十六進(jìn)制,前綴為 '0' 的字符串被當(dāng)作八進(jìn)制。所有其它字符串都被當(dāng)作是十進(jìn)制的。
而對(duì)于手動(dòng)輸入的數(shù)字,前面加了個(gè)0也是很普通的情況,這樣無(wú)意間就會(huì)變成八進(jìn)制了。
使用說(shuō)明&源碼下載
首先實(shí)例化一個(gè)滑動(dòng)條對(duì)象,需要兩個(gè)參數(shù),分別是滑動(dòng)容器和滑塊(滑塊要在容器里面哦):
var sld = new Slider("idSlider", "idBar") 有以下這些可選參數(shù)和屬性:
屬性:默認(rèn)值//說(shuō)明
MinValue: 0,//最小值
MaxValue: 100,//比較大值
WheelSpeed: 5,//鼠標(biāo)滾輪速度,越大越快(0則取消鼠標(biāo)滾輪控制)
KeySpeed: 50,//方向鍵滾動(dòng)速度,越大越慢(0則取消方向鍵控制)
Horizontal: true,//是否水平滑動(dòng)
RunTime: 20,//自動(dòng)滑移的延時(shí)時(shí)間,越大越慢
RunStep: 2,//自動(dòng)滑移每次滑動(dòng)的百分比
Ease: false,//是否緩動(dòng)
EaseStep: 5,//緩動(dòng)等級(jí),越大越慢
onMin: function(){},//最小值時(shí)執(zhí)行
onMax: function(){},//比較大值時(shí)執(zhí)行
onMid: function(){},//中間值時(shí)執(zhí)行
onDragStart:function(){},//拖動(dòng)開(kāi)始時(shí)執(zhí)行
onDragStop: function(){},//拖動(dòng)結(jié)束時(shí)執(zhí)行
onMove: function(){}//滑動(dòng)時(shí)執(zhí)行 點(diǎn)擊下載此文件