JavaScript 仿Apple產(chǎn)品展示【應(yīng)用技巧】

在仿Apple滑動條產(chǎn)品展示效果中，可以看到MaxValue設(shè)成了內(nèi)容容器的scrollWidth和clientWidth之差：

MaxValue: $("idContent").scrollWidth - $("idContent").clientWidth, 其實這個值就是內(nèi)容容器scrollLeft的比較大值，這樣在滑動時要設(shè)置的內(nèi)容容器的scrollLeft剛好就是GetValue方法的值了（預(yù)覽效果2也一樣）：

onMove: function(){ $("idContent").scrollLeft = this.GetValue(); } 預(yù)覽效果2中，滑塊的高度也特別設(shè)置過：

$("idBar2").style.height = $("idSlider2").clientHeight * Math.min($("idContent2").clientHeight / $("idContent2").scrollHeight, 1) - 4 + "px"; 其實就是使內(nèi)容跟內(nèi)容容器的高度之比等于滑塊跟滑動容器之比，當(dāng)然這個比不能大于1，否則就滑塊高度就超過容器高度了，里面的4是邊框?qū)挾取?/p>

這樣的好處是滑塊會根據(jù)實際內(nèi)容自動設(shè)置大小，就像一般的滾動條，內(nèi)容越多滾動條就越小，反之就越大，這利于用戶體驗。

ps：仿Apple那個為了突出效果所以沒有設(shè)置，實際應(yīng)用中也應(yīng)該這樣設(shè)置一下。

預(yù)覽效果3中，從GetValue和GetPercent取得的數(shù)有可能是很長的小數(shù)，所以顯示時必須處理一下。這里看到程序中parseInt使用了兩個參數(shù)，而且第二個參數(shù)是10，是不是多余的呢？
不是的，因為手冊上說了：

如果沒有提供，則前綴為 '0x' 的字符串被當(dāng)作十六進(jìn)制，前綴為 '0' 的字符串被當(dāng)作八進(jìn)制。所有其它字符串都被當(dāng)作是十進(jìn)制的。

而對于手動輸入的數(shù)字，前面加了個0也是很普通的情況，這樣無意間就會變成八進(jìn)制了。

使用說明&源碼下載

首先實例化一個滑動條對象，需要兩個參數(shù)，分別是滑動容器和滑塊（滑塊要在容器里面哦）：

var sld = new Slider("idSlider", "idBar") 有以下這些可選參數(shù)和屬性：

屬性:默認(rèn)值//說明

MinValue: 0,//最小值

MaxValue: 100,//比較大值

WheelSpeed: 5,//鼠標(biāo)滾輪速度,越大越快(0則取消鼠標(biāo)滾輪控制)

KeySpeed:  50,//方向鍵滾動速度,越大越慢(0則取消方向鍵控制)

Horizontal: true,//是否水平滑動

RunTime: 20,//自動滑移的延時時間,越大越慢

RunStep: 2,//自動滑移每次滑動的百分比

Ease:  false,//是否緩動

EaseStep: 5,//緩動等級,越大越慢

onMin:  function(){},//最小值時執(zhí)行

onMax:  function(){},//比較大值時執(zhí)行

onMid:  function(){},//中間值時執(zhí)行

onDragStart:function(){},//拖動開始時執(zhí)行

onDragStop: function(){},//拖動結(jié)束時執(zhí)行

onMove:  function(){}//滑動時執(zhí)行 點擊下載此文件

分享標(biāo)題：JavaScript 仿Apple產(chǎn)品展示滑動條效果
文章地址：http://www.rwnh.cn/news/114248.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、用戶體驗、手機(jī)網(wǎng)站建設(shè)、App設(shè)計、網(wǎng)站維護(hù)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)