js实现鼠标向右滑动解锁特效 | findtp插件网

findtp插件网

您现在的位置是:首页>图片内容页

Plugin

js实现鼠标向右滑动解锁特效

简介:

时间:2020-03-19

访问:512

下载

详情

鼠标滑动解锁使用越来越常见了

20200319223035-231969.png


引入js代码:

//3.1.1鼠标移动事件的方法实现
function mousemoveHandler(e) {
	var e = e || window.event || e.which;
	var moveX = e.clientX;
	var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
	bgColor.style.width = offsetX + "px";
	slider.style.left = offsetX + "px";

	if(offsetX == successMoveDistance) {
		success();
	}
	//如果不设置滑块滑动时会出现问题(目前还不知道为什么)
	e.preventDefault();
};

//3.1.2鼠标松开事件的方法实现
function mouseupHandler(e) {
	if(!isSuccess) {
		bgColor.style.width = 0 + "px";
		slider.style.left = 0 + "px";
		bgColor.style.transition = "width 0.8s linear";
		slider.style.transition = "left 0.8s linear";
	}
	document.onmousemove = null;
	document.onmouseup = null;
};

//五、定义一个滑块解锁成功的方法
function success() {
	isSuccess = true;
	txt.innerHTML = "解锁成功";
	bgColor.style.backgroundColor = "lightgreen";
	slider.className = "slider active";
	icon.className = "iconfont iconchenggong";
	//滑动成功时,移除鼠标按下事件和鼠标移动事件
	slider.onmousedown = null;
	document.onmousemove = null;
};

链接: https://pan.baidu.com/s/1cruaPS1HjSrTcmkjzPQesQ 提取码: 2jm9

相关

相关评论

共有0条评论来说两句吧...