仿乙個好玩的滑動效果

2022-01-14 00:00:29 字數 1236 閱讀 4231

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...