首頁猿問這種計時器上下拉動選擇數(shù)字怎么實現(xiàn)的

這種計時器上下拉動選擇數(shù)字怎么實現(xiàn)的

JavaScript

三國紛爭 2018-09-07 10:09:42

小時的數(shù)字選擇到0的時候上面已經(jīng)沒有數(shù)字可以選擇了，但是分鐘不一樣，還可以往上選從59開始循環(huán)，這是怎么實現(xiàn)的，并且數(shù)字轉(zhuǎn)動到框里面樣式發(fā)生改變，是怎么確定該數(shù)字轉(zhuǎn)到了框里的

查看完整描述

1 回答

揚帆大魚

TA貢獻1799條經(jīng)驗獲得超9個贊

寫一下思路，首先：使用DIV+CSS+JS實現(xiàn)，不能用select；

數(shù)字是使用transform3d做的變形效果；

分鐘滾動的動畫效果由JS捕捉用戶行為判斷滑動距離，添加css動畫transition配合transformY軸位移實現(xiàn)；
從0向上滾動到59需要復制一個組出來
DEMO里設定每分鐘的高度是14px，初始化時的值translate3d(0,-112px,0);
這樣一上來焦點就在0這個位置了，若想知道用戶滾動的值是多少
就根據(jù)translate3d(0,-112px,0)的值/14（每分鐘行的高度）計算滑動到了第幾個值
比如demo第一行是8 ，8*14 = 112

反對回復 2018-10-26