• JavaScript 仿Apple產品展示滑動條效果

    作者: 日期:2020-09-11 瀏覽:

    JavaScript 仿Apple產品展示滑動條效果

    JavaScript 仿Apple產品展示【應用技巧】

    在仿Apple滑動條產品展示效果中,可以看到MaxValue設成了內容容器的scrollWidth和clientWidth之差:

    MaxValue: $("idContent").scrollWidth - $("idContent").clientWidth, 其實這個值就是內容容器scrollLeft的最大值,這樣在滑動時要設置的內容容器的scrollLeft剛好就是GetValue方法的值了(預覽效果2也一樣):

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

    $("idBar2").style.height = $("idSlider2").clientHeight * Math.min($("idContent2").clientHeight / $("idContent2").scrollHeight, 1) - 4 + "px"; 其實就是使內容跟內容容器的高度之比等于滑塊跟滑動容器之比,當然這個比不能大于1,否則就滑塊高度就超過容器高度了,里面的4是邊框寬度。

    這樣的好處是滑塊會根據實際內容自動設置大小,就像一般的滾動條,內容越多滾動條就越小,反之就越大,這利于用戶體驗。

    ps:仿Apple那個為了突出效果所以沒有設置,實際應用中也應該這樣設置一下。

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

    如果沒有提供,則前綴為 '0x' 的字符串被當作十六進制,前綴為 '0' 的字符串被當作八進制。所有其它字符串都被當作是十進制的。

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

    使用說明&源碼下載

    首先實例化一個滑動條對象,需要兩個參數,分別是滑動容器和滑塊(滑塊要在容器里面哦):

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

    屬性:默認值//說明

    MinValue: 0,//最小值

    MaxValue: 100,//最大值

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

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

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

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

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

    Ease:  false,//是否緩動

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

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

    onMax:  function(){},//最大值時執行

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

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

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

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

     

    十余年老牌網站建設外包公司,鄭州高端網站建設領跑者,數千家網站設計案例.面向全國提供1對1的專業定制開發及網站制作維護報價和方案,能精準把握企業官網網頁設計核心!
    首頁
    電話
    短信
    聯系
    欧洲海滩裸体XXXXX