iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads系列 第 29

[JS30] DAY28 : Video speed controller


[程式碼&DEMO] [HackMD完整筆記]

目標


實作滑鼠點擊後,能夠左右移動捲軸的效果。

步驟流程


STEP1 取得頁面元素

    const speed = document.querySelector('.speed');
	const bar = speed.querySelector('.speed-bar');
    const video = document.querySelector('.flex');

STEP2 滑鼠(mousemove)移動事件

function handleMove(e){
        // 取得觸發點位置
		const y = e.pageY - this.offsetTop;
		console.log(this.offsetHeight);
		const percent = y / this.offsetHeight;
		const min = 0.4;
		const max = 4;
        // Math.round去計算取得四捨五入的百分比值
		const height = Math.round(percent * 100) + '%';
		const playbackRate = percent * ( max - min) + min;
		bar.style.height = height;
		bar.textContent = playbackRate.toFixed(2) + 'x';
		video.playbackRate = playbackRate;
	}

STEP3 滑鼠移動(mousemove)監聽事件

speed.addEventListener('mousemove', handleMove);

上一篇
[JS30] DAY27 : Click And Drag
下一篇
[JS30]DAY29+1 : Countdown Timer+Whack a Hole!
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言