[程式碼&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);