jq实现音量的自由控制

思路：判断当前点击位置和屏幕的距离，进行修改音量

$("body").append(`<div class="yl000" id="_y1" style="display: none;"><div class="yl001"><div class="yl002" id="_y2"></div></div></div>`);

/**
 *音量初始化 
 * @returns
 */
var _ctn;
var _gd;
function loadVolume(){
	//初始获取用户设置的音量
	_showConfigVolume();
	/* 音量 */
	_ctn = document.getElementById('_y1');
	_gd = document.getElementById('_y2');
	//滑动事件
	_ctn.addEventListener("touchstart", showMsg);
	/**
	*滑动事件
	*/
	_ctn.addEventListener('touchmove', function(e) {
		_moveEndY = e.changedTouches[0].pageY;
		//根据坐标修改音量
		updateVolume(_moveEndY);
	})
	/**
	*滑动结束手指离开触发
	*/
	_ctn.addEventListener('touchend', function(e) {
		//保存当前音量
		endVolume();
	})
	/**
	*鼠标事件
	*/
	_ctn.onmousedown = function(ev){
		// 停止定时执行:
		clearInterval(_volumeTime);
		var oEvent = ev || event;
		//当前的Y轴（单位px）
		_startY = oEvent.pageY;
		//获取当前音量的宽度，并获取当前宽度分成100份每份是多少
		_partVolume =(window.screen.height/$('.yl001').height());
		//根据坐标修改音量
		updateVolume(_startY);
		//鼠标移动
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			_moveEndY = oEvent.pageY;
			//根据坐标修改音量
			updateVolume(_moveEndY);
		}
		//鼠标松开
		document.onmouseup = function(){
			document.onmousemove = null;
			document.onmouseup = null;
			//保存当前音量
			endVolume();
		}
	}
}

/**
 * 根据参数设置音量
 * @private
 */
function _szylVolumer(yl) {
	if(yl){
		if(yl< 0){
			yl = 0;
		}
		if(yl == 0){
			$("#_ctrl_volume").removeClass("foot-volume1").addClass("foot-volume2");
		}else{
			$("#_ctrl_volume").removeClass("foot-volume2").addClass("foot-volume1");
		}
		let v = parseFloat(yl/100);
		if($("video")){
			$("video").prop("volume",v);
		}
		if($("audio")){
			$("audio").prop("volume",v);
		}
	}
}

/**
*获取配置的音量
*/
function _showConfigVolume(){
	//判断session中是否保存了音量，如果存在则在session中获取，不存在数据库中获取数据
	var hvolumer = localStorage.getItem("h_volumer");
	if(hvolumer){
		$(".yl002").css("height", hvolumer + "%");
		//设置音量
		_szylVolumer(hvolumer);
	}else{
		$(".yl002").css("height","1%");
		let v = 0.1;
		//session中放入音量结果
		localStorage.setItem("h_volumer",10);
		if($("video")){
			$("video").prop("volume",v);
		}
		if($("audio")){
			$("audio").prop("volume",v);
		}
	}
}
/**
 * 点击改变当前div的结构
 */
var volumeFalge = false;
function cntdefaultMutedFalse(){
	if(volumeFalge){
		$(".yl000").hide();
		volumeFalge = false;
	}else{
		$(".yl000").show();
		volumeFalge = true;
		volumeCT();
	}
}
/**
*定时三秒隐藏
*/
var _volumeTime; 
function volumeCT(){
	//清除上次指定的定时器
	clearInterval(_volumeTime);
	_volumeTime = setTimeout(function() {
		$(".yl000").hide();
		volumeFalge = false;
	}, 3000);
}
var _startY, _moveEndY,_partVolume;
function showMsg(e) {
	//当前的Y轴（单位px）
	_startY = e.touches[0].pageY;
	//获取当前音量的宽度，并获取当前宽度分成100份每份是多少
	_partVolume =(window.screen.height/$('.yl001').height());
	//根据坐标修改音量
	updateVolume(_startY);
}

/**
*根据坐标修改音量
*/
function updateVolume(zby){
	// 停止定时执行:
	clearInterval(_volumeTime);
	//当前坐标距离当前div的距离转为vw
	//$('.yl001').offset().top div的y轴
	var letVolume = (zby-$('.yl001').offset().top)/(window.screen.height/100);
	var volumeNum = 100-(letVolume*_partVolume);
	if(volumeNum < 0){
		volumeNum = 0;
		$("#_ctrl_volume").removeClass("foot-volume1").addClass("foot-volume2");
	}else{
		$("#_ctrl_volume").removeClass("foot-volume2").addClass("foot-volume1");
	}
	if(volumeNum <=100){
		$(".yl002").css("height",volumeNum + "%");
		let v = parseFloat(volumeNum/100);
		if($("video")){
			$("video").prop("volume",v);
		}
		if($("audio")){
			$("audio").prop("volume",v);
		}
	}
}

/**
*触摸结束/鼠标松开
*/
function endVolume(){
	//获取当前的音量百分比
	var presentWidth = _gd.style.height;
	//对百分比进行截取保存到配置表中
	var presentWidth1 = presentWidth.substring(0, presentWidth.indexOf("%"));
	//session中放入音量结果
	localStorage.setItem("h_volumer",presentWidth1);
	if (presentWidth1) {
		//设置音量
		_szylVolumer(presentWidth1);
	}
	_volumeTime = setTimeout(function() {
		$(".yl000").hide();
		volumeFalge = false;
	}, 3000);
}

效果：