拖拽+弹性运动

最新推荐文章于 2020-09-15 17:53:12 发布

编程之上

最新推荐文章于 2020-09-15 17:53:12 发布

阅读量1k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/ruizhengyun/article/details/40566639

版权

javascript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

var oUl = document.getElementById('ul1');
	var aLi = oUl.getElementsByTagName('li');
	
	var disX = 0; //鼠标记录位置
	var down = 0;
	var iNow = 0;
	var iTimer = null;
	var iSpeed = 0;
	oUl.onmousedown = function(ev){
		var e = ev  || window.event;
		disX = e.clientX - oUl.offsetLeft;
		down = e.clientX;

		document.onmousemove = function(ev){
			var e = ev  || window.event;
			oUl.style.left = e.clientX - disX + 'px';
		};
		document.onmouseup = function(ev){
			var e = ev||window.event;
			if(e.clientX < down){
				if(iNow!=aLi.length -1){
					iNow++;
				}
				startMove(-aLi[0].offsetWidth * iNow);
			}else{
				if(iNow!=0){
					iNow--;
				}
				startMove(-aLi[0].offsetWidth * iNow);
			}
			document.onmousemove = null;
			document.onmousedown = null; 
		}
		return false;
	};
	function startMove(iTarget){
		clearInterval(iTimer);
		iTimer = setInterval(function(){
			iSpeed += (iTarget - oUl.offsetLeft)/6;
			iSpeed *=0.75;
			if(Math.abs(iSpeed)<=1 && Math.abs(iTarget - oUl.offsetLeft)<=1){
				clearInterval(iTimer);
				oUl.style.left = iTarget + 'px';
				iSpeed = 0;
			}else{
				oUl.style.left = oUl.offsetLeft + iSpeed +'px';
			}
		},30);
	}