原生js实现拖动图片左右弹性切换（模仿iPhone弹性拖拽的功能）

最新推荐文章于 2024-01-18 22:18:01 发布

冰雪为融

最新推荐文章于 2024-01-18 22:18:01 发布

阅读量2.6k

点赞数

分类专栏： js练习文章标签： js 弹性运动

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79590359

版权

js练习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

因为弹性运动我在弹性菜单实例中已经列过详细的步骤了，所以此处不再赘述，有不懂的或有兴趣的请点击原生js实现弹性菜单

这个例子里面我们主要解决的问题有

1、弹性运动的实现（不再详细讲解）

2、怎样判断鼠标是向左拖动还是向右拖动

当抬起鼠标的位置大于按下鼠标的位置时，则判断为向左拖拽，当抬起鼠标的位置小与按下鼠标的位置时，则判断为向右拖拽。

解决了上面两个问题，然后我们直接上代码

HTML代码

<div id="iphone" >
	<div id="wrap">
		<ul id="ul1">
			<li style="background:url(images/pic1.png);" title="妙味课堂"></li>
			<li style="background:url(images/pic2.png);" title="妙味课堂"></li>
			<li style="background:url(images/pic3.png);" title="妙味课堂"></li>
			<li style="background:url(images/pic4.png);" title="妙味课堂"></li>
		</ul>
	</div>
</div>

CSS代码

* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #333; }
#iphone { width: 900px; height: 600px; background: url(images/bg.png); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; }
#wrap { width: 238px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; }
#iphone ul { width: 960px; height: 361px; cursor: pointer; position: absolute; top: 0px; left: 0px; }
#iphone li { float: left; width:240px; height:360px; overflow:hidden; }

JS代码

<script>
window.onload = function(){
	var oUl = document.getElementById('ul1');
	var aLi = oUl.getElementsByTagName('li');	
	var disX = 0;
	var downX = 0;
	var iNow = 0;
	var timer = null;
	var iSpeed = 0;	
	oUl.onmousedown = function(ev){
		var ev = ev || window.event;
		disX = ev.clientX - oUl.offsetLeft;//记录鼠标按下的位置到ul左侧是位置
		downX = ev.clientX;//记录鼠标按下时的位置	
		clearInterval(timer);	
		document.onmousemove = function(ev){
			var ev = ev || window.event;
			oUl.style.left = ev.clientX - disX + 'px';//鼠标移动时，ul随着鼠标的移动而偏移
		};
		document.onmouseup = function(ev){
			document.onmousemove = null;
			document.onmouseup = null;//鼠标抬起时，取消鼠标移动和抬起时的事件
			var ev = ev || window.event;		
			if( ev.clientX < downX ){
				//alert('←');
				if( iNow != aLi.length-1 ){
					iNow++;
				}
				
				startMove( - iNow * aLi[0].offsetWidth  );//鼠标抬起时，让ul进行移动
			}
			else{
				//alert('→');
				
				if( iNow != 0 ){
					iNow--;
				}				
				startMove( - iNow * aLi[0].offsetWidth  );				
			}
			
		};
		return false;//取消默认行为
	};
	
	function startMove(iTarget){//下面为弹性运动的封装
		clearInterval(timer);//清空定时器
		timer = setInterval(function(){	//开启定时器	
			iSpeed += (iTarget - oUl.offsetLeft)/6;
			iSpeed *= 0.75;		
			if( Math.abs(iSpeed)<=1 && Math.abs(iTarget - oUl.offsetLeft)<=1 ){
				clearInterval(timer);
				iSpeed = 0;
				oUl.style.left = iTarget + 'px';
			}
			else{
				oUl.style.left = oUl.offsetLeft + iSpeed + 'px';
			}
			
		},30);
	}
	
};
</script>