版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010067685/article/details/53786307
今天闲来无事看到了一篇文章 五行代码实现 炫动滑动 卡片层叠布局，仿探探、人人影视订阅界面 简单&优雅：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 api
swipeLeft: 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去掉就行了.懒的写了
手机可以通过这个地址扫码访问 查看效果...
导趣网 可以帮忙点点~很久没更新更新也更新数据 在处理导数据那块的东西 淘宝的api没资格申请。。只能用最笨的方法去弄数据.