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

来源：互联网发布：重大资产重组知乎编辑：程序博客网时间：2024/04/29 19:14
自己写了一个划入的效果
<!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>
自己记录一下。
0 0
实现一个简单的 页面划入效果

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