实现一个简单的页面划入效果

最新推荐文章于 2021-06-18 15:24:35 发布

quanwuhui

最新推荐文章于 2021-06-18 15:24:35 发布

阅读量937

点赞数

分类专栏： Js 文章标签： javascript 滑入移动端

本文链接：https://blog.csdn.net/quanwuhui/article/details/60326874

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自己写了一个划入的效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
		<title>Slide-expamle</title>
		<style>
			html,
			body,
			ul,
			li,
			ol,
			img {
				margin: 0;
				padding: 0;
				border: none;
				list-style: none;
				border-image: none;
				border-image-width: 0;
			}
			
			body {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}
			
			.content {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			.main {
				width: 300%;
				height: 100%;
			}
			
			.main li {
				float: left;
				width: 33.333333%;
				height: 100%;
			}
			
			.main li img {
				width: 100%;
				height: 100%;
			}
			
			.nav {
				margin-top: -15%;
				padding: 0 25%;
				display: flex;
				justify-content: center;
			}
			
			.nav li {
				width: 10px;
				height: 10px;
				border: 1px solid #e3e3e3;
				border-radius: 10px;
				background-color: #fff;
			}
			
			.nav li+li {
				margin-left: 5px;
			}
			
			.nav .active {
				background-color: #e3e3e3;
			}
		</style>
	</head>

	<body>
		<div class="content">
			<ul id="main" class="main">
				<li><img src="img/360592421252747277.jpg" />
					<ul class="nav">
						<li class="active"></li>
						<li></li>
						<li></li>
					</ul>
				</li>
				<li><img src="img/70711697724823488.jpg" />
					<ul class="nav">
						<li></li>
						<li class="active"></li>
						<li></li>
					</ul>
				</li>
				<li><img src="img/825168513028341693.jpg" />
					<ul class="nav">
						<li></li>
						<li></li>
						<li class="active"></li>
					</ul>
				</li>
			</ul>
		</div>
		<script>
			var body = document.body;
			body.addEventListener("orientationchange", function(e) {
				e.stopPropagation();
				e.preventDefault();
			});
			var main = document.getElementById('main');

			var startX = 0,
				screenWidth = screen.width,
				bidTranslateX = 0,
				lang = 0;
			main.addEventListener('touchstart', function(e) {
				var touch = e.touches[0];
				startX = touch.pageX;
				console.log(startX);
			});

			main.addEventListener('touchmove', function(e) {
				var touch = e.touches[0];
				var movingX = touch.pageX;
				lang = movingX - startX;
				var translateX = lang + bidTranslateX;
				if(Math.abs(lang) < screenWidth) {
					if(lang < 0) {
						if(translateX > -(screenWidth * 2)) {
							this.style.transform = 'translateX(' + translateX + 'px)';
						}

					} else {
						if(translateX < 0) {
							this.style.transform = 'translateX(' + translateX + 'px)';
						}
					}
				}

				console.log("touchmove:" + translateX);
			});

			main.addEventListener('touchend', function(e) {
				var touch = e.changedTouches[0],
					translateX;
				var endX = touch.pageX;
				if(lang > 0) {
					bidTranslateX += screenWidth;
				} else {
					bidTranslateX -= screenWidth;
				}

				if(bidTranslateX > 0) {
					translateX = bidTranslateX = 0;
				} else if(Math.abs(bidTranslateX) > (screenWidth * 2)) {
					translateX = bidTranslateX = -(screenWidth * 2);
				} else {
					translateX = bidTranslateX;
				}
				this.style.transition = "-webkit-transform 500ms ease-out";
				this.style.webkitTransform = "translateX(" + translateX + "px)";
				console.log('touchend:' + bidTranslateX);
			});
		</script>
	</body>

</html>

自己记录一下。