wap简单的卡片层叠布局滑动

本文主要是介绍wap简单的卡片层叠布局滑动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天闲来无事看到了一篇文章五行代码实现炫动滑动卡片层叠布局，仿探探、人人影视订阅界面简单&优雅：LayoutManager+ItemTouchHelper

感觉挺好玩的..

点进去之前我以为是web实现的呢然而并不是阿西吧

后面想了想可以用web实现吗感觉应该可以说干就干

先贴code吧

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="/content/js/jquery-1.8.2.min.js"></script><script src="/content/js/jquery.touchSwipe.min.js"></script><meta content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1.0, user-scalable=no" name="viewport" /><title>左右滑动测试</title><style>html, body { margin: 0; padding: 0; }header { background-color: #000000; color: #fff; padding: 0; margin: 0; line-height: 40px; text-align: center; font-size: 20px; }span, p { margin: 0; padding: 0; }img { margin: 0; padding: 0; }.layou { width: 70%; height: 300px; position: relative; margin: 10px auto; }.layou-list { position: absolute; width: 100%; height: 100%; overflow: hidden; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.40); padding: 10px 5% 0 5%; background-color:#000;}.layou-list-img { width: 100%; height: 90%; }.layou-list-bottom { text-align: right; position: absolute; width: 100%; left: 0; bottom: 0; background-color: #000000; color: #fff; height: 10%; line-height: 30px; border-bottom: 1px solid #7e7e7e; }</style><!---webkit-transform: skewX(2deg);-->
</head>
<body ontouchmove="event.preventDefault()"><header><p>layouDemo</p></header><div class="layou"><div class="layou-list"><img class="layou-list-img" src="/content/images/icons/sl1.png" /><div class="layou-list-bottom"></div></div><div class="layou-list"><img class="layou-list-img" src="/content/images/icons/sl2.png" /><div class="layou-list-bottom"></div></div><div class="layou-list"><img class="layou-list-img" src="/content/images/icons/sl3.png" /><div class="layou-list-bottom"></div></div><div class="layou-list"><img class="layou-list-img" src="/content/images/icons/sl4.png" /><div class="layou-list-bottom"></div></div><div class="layou-list"><img class="layou-list-img" src="/content/images/icons/sl5.png" /><div class="layou-list-bottom"></div></div><div class="layou-list"><img class="layou-list-img" src="/content/images/icons/sl6.png" /><div class="layou-list-bottom"></div></div></div><script>$(function () {var layouNum = $(".layou-list").length;var load = function () {$(".layou-list").each(function (i, e) {$(e).css({ "z-index": layouNum - i, "transition-duration": "0.7s", "transform": " translate(0px, " + i * 7 + "px)", "width": "" + (90 - 4 * i) + "%", "-webkit-transition": "width .7s;", "left": 2 * i + "%" });});}$(".layou-list").each(function (i, e) {$(e).data("index", i);$(e).css({ "z-index": layouNum - i, "transition-duration": "0.7s", "transform": " translate(0px, " + i * 7 + "px)", "width": "" + (90 - 4 * i) + "%", "-webkit-transition": "width .7s;", "left": 2 * i + "%" });$(e).find(".layou-list-bottom").text((i + 1) + "/" + layouNum);});var isSwipe = false;//是否正在动画的控制$(".layou").swipe({//自己看jquery.touchSwipe.min.js apiswipeLeft: function (event, phase, direction, distance, duration, fingerCount) {//往左边滑动的事件//console.log("你用" + fingerCount + "个手指以" + duration + "秒的速度向" + direction + "滑动了" + distance + "像素 " + "你在" + phase + "中");if (isSwipe) {return !1;}isSwipe = true;$(".layou-list:eq(0)")[0].style.webkitTransform = "translate(" + -3 * distance + "px,-50px) translateZ(0)";setTimeout(function () {$(".layou").append($(".layou-list:eq(0)").attr("style", "").clone());$(".layou-list:eq(0)").remove();load();isSwipe = false;}, 500);},swipeRight: function (event, direction, distance, duration, fingerCount) {//往右滑动的事件if (isSwipe) {return !1;}isSwipe = true;$(".layou-list:eq(0)")[0].style.webkitTransform = "translate(" + 3 * distance + "px,-100px) translateZ(0)";//滑走的动画setTimeout(function () {$(".layou").append($(".layou-list:eq(0)").attr("style", "").clone());//移除动画,克隆元素,追加$(".layou-list:eq(0)").remove();//移除元素load();//重新加载isSwipe = false;}, 500);}});});</script>
</body>
</html>

花了个把小时实现了一下..(我不会跟你说我真的是现学现卖的....)代码应该比较简单..思路也简单主要是滑动事件动画实现

还有没有实现的功能:就是滑动一部分图片滑动一部分放手之后图片返回原位, 做了一下没弄出来 =_=.... 应该是判断滑动像素大于多少多少然后滑动动画然后复位

还有个问题就是页面进来那些图片会抖一两下.. 可以用个load层掩盖一下当layou-list 加载之后将load去掉就行了.懒的写了

手机可以通过这个地址扫码访问查看效果...