移动端滑动事件

项目中要实现一个功能，在宽度高度固定的一个div中放入几张图片，图片的高度与div的高度相等，几张图片的总长度要远远超过div的长度，那么问题来了，如何才能让用户通过手指的滑动，看到所有的图片呢？

这个可以有两种方法：

方法一：

图片的上一层父元素设置width，要大于所有图片的总宽度，最外层div宽度高度固定，共三层

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tp{
				width: 90vw;
				height: 30vh;
			}
			#tp img{
				width: 30vw;
				height: 20vh;
			}
			#kd{
				width: 245vw;/*划重点*/
			}
		</style>
	</head>
	<body>
		<!--固定的div-->
		<div id="tp">
			<div id="kd">
				<img src="images/apic11412.jpg" alt="" />
				<img src="images/zzpic9746.jpg" alt=""/>
				<img src="images/apic11412.jpg" alt="" />
				<img src="images/zzpic7320.jpg" alt="" />
				<img src="images/bpic3454.jpg" alt="" />
				<img src="images/zzpic9746.jpg" alt="" />
				<img src="images/bpic3454.jpg" alt="" />
				<img src="images/zzpic6546.jpg" alt="" />
			</div>
		</div>
	</body>
</html>

此时，已经可以进行图片的滑动了

方法二：

在父元素上设置white-space: nowrap，保证子元素不会换行，共两层（所有浏览器都支持 white-space 属性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tp{
				width: 90vw;
				height: 30vh;
				/*划重点*/
				white-space: nowrap;
			}
			#tp img{
				width: 30vw;
				height: 20vh;
			}
		</style>
	</head>
	<body>
		<!--固定的div-->
		<div id="tp">
				<img src="images/apic11412.jpg" alt="" />
				<img src="images/zzpic9746.jpg" alt=""/>
				<img src="images/apic11412.jpg" alt="" />
				<img src="images/zzpic7320.jpg" alt="" />
				<img src="images/bpic3454.jpg" alt="" />
				<img src="images/zzpic9746.jpg" alt="" />
				<img src="images/bpic3454.jpg" alt="" />
				<img src="images/zzpic6546.jpg" alt="" />
		</div>
	</body>
</html>

此时，已经可以进行图片的滑动了。

这两个方法都简单但很实用！我之前用的touch事件来达到同样的效果，就比较繁琐了。

猜你喜欢