see the pen weevkb by imgss (@imgss) on codepen.
see the pen weevkb by imgss (@imgss) on codepen.
其實原理很簡單,就是在小圓點移動時,計算數字和小圓點的距離,來控制数字的上公升和下降。
首先,要使小圓點跟隨滑鼠移動起來:**如下:
slide.addeventlistener('mousedown', function(e)
document.addeventlistener('mousemove', move)
document.addeventlistener('mouseup', function())
})
這段**監聽了3個事件,mousedown
,mouseup
,mousemove
,當滑鼠按下時,觸發滑塊的mousedown事件,同時給document繫結了mousemove和mouseup事件,來使滑塊可以跟著滑鼠移動,當滑鼠彈起時,使滑塊不再隨滑鼠移動。
之所以在document元素上監聽mousemove事件,是因為如果在滑塊上監聽,很容易由於滑鼠滑動過快,造成滑鼠離開滑塊的區域,導致mousemove事件失效,而在document元素上監聽就不會有這樣的問題。接下來我們來看看move
這個函式:
function move(e)
newleft = left + movex
let newcenterleft = newleft + slidewidth / 2
slide.style.left = newleft + 'px'
// 控制数字的上公升和下降
// console.log('*****===')
for(let label of labels) else
}}
move函式主要幹了兩件事,乙個是改變滑塊的位置,另乙個是通過實時判斷數字和滑塊的距離來改變量字的高度。改變位置都是通過改變元素的left/top樣式來實現的。在改變量字高度的實現上,偷了一點懶,從形狀上看,滑塊邊緣是乙個半圓形,因此數字距離底部的高度(y)和數字距離滑塊圓心的距離(x)應該是乙個非線性的關係,函式表示式:
y = math.sqrt(r*r - x*x)// r是滑塊邊緣半徑
在實現上直接線性轉換了一下r-x
。(完) 想到乙個好玩的
想到乙個好玩的,沒人寫乙個下五子棋的程式,然後再想辦法統一介面,再由某些高手來寫乙個管道程式 用bash現成的也行 然後用程式和程式來比看哪個五子棋更厲害!為了防止作弊,可能需要第三方監督程式,呵呵。忽然想到的小靈感,挺有意思的!除了五子棋各種各樣的都可以咯,統一介面暫時簡單的想到了幾種,第一種下了...
仿ios中layout的滑動效果
package code.suibianchou.com.custormview2 import android.annotation.suppresslint import android.content.context import android.graphics.rect import an...
乙個仿糯公尺彈框效果demo
如下 tabs j ascript close dialog rel external nofollow www.cppcns.com 北京 北京 上海 天津 杭州 西安 成都 鄭州 廈門 青島 深圳 esklwzgt 太原 重慶 武漢 南京 廣州 瀋陽 濟南 哈爾濱 lwww.cppcns.com...