已解決430363個問題，去搜搜看，總會有你想問的

這種計時器上下拉動選擇數字怎么實現的

關注

首頁猿問這種計時器上下拉動選擇數字怎么實現的

這種計時器上下拉動選擇數字怎么實現的

JavaScript

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

小時的數字選擇到0的時候上面已經沒有數字可以選擇了，但是分鐘不一樣，還可以往上選從59開始循環，這是怎么實現的，并且數字轉動到框里面樣式發生改變，是怎么確定該數字轉到了框里的

查看完整描述

1 回答

揚帆大魚

TA貢獻1799條經驗獲得超9個贊

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

數字是使用transform3d做的變形效果；

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

反對回復 2018-10-26

1 回答
0 關注
663 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

這種計時器上下拉動選擇數字怎么實現的

這種計時器上下拉動選擇數字怎么實現的

1 回答

添加回答