jquery左划出现删除按钮，右滑隐藏
jquery左侧划出显示删除按钮，右滑动隐藏删除按钮
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>左划出现删除按钮，右滑隐藏</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function init() { // 设定每一行的宽度=屏幕宽度+按钮宽度
$(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
// 设定常规信息区域宽度=屏幕宽度
$(".line-normal-wrapper").width($(".line-wrapper").width());
// 设定文字部分宽度（为了实现文字过长时在末尾显示...）
$(".line-normal-msg").width($(".line-normal-wrapper").width() - 280); // 获取所有行，对每一行设置监听
var lines = $(".line-normal-wrapper");
var len = lines.length;
var lastX, lastXForMobile; // 用于记录被按下的对象
var pressedObj; // 当前左滑的对象
var lastLeftObj; // 上一个左滑的对象 // 用于记录按下的点
var start; // 网页在移动端运行时的监听
for(var i = 0; i < len; ++i) {
lines[i].addEventListener('touchstart', function(e) {
lastXForMobile = e.changedTouches[0].pageX;
pressedObj = this; // 记录被按下的对象 // 记录开始按下时的点
var touches = event.touches[0];
start = {
x: touches.pageX, // 横坐标
y: touches.pageY // 纵坐标
};
}); lines[i].addEventListener('touchmove', function(e) {
// 计算划动过程中x和y的变化量
var touches = event.touches[0];
delta = {
x: touches.pageX - start.x,
y: touches.pageY - start.y
}; // 横向位移大于纵向位移，阻止纵向滚动
if(Math.abs(delta.x) > Math.abs(delta.y)) {
event.preventDefault();
}
}); lines[i].addEventListener('touchend', function(e) {
if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
$(lastLeftObj).animate({
marginLeft: "0"
}, 500); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
var diffX = e.changedTouches[0].pageX - lastXForMobile;
if(diffX < -150) {
$(pressedObj).animate({
marginLeft: "-132px"
}, 500); // 左滑
lastLeftObj && lastLeftObj != pressedObj &&
$(lastLeftObj).animate({
marginLeft: "0"
}, 500); // 已经左滑状态的按钮右滑
lastLeftObj = pressedObj; // 记录上一个左滑的对象
} else if(diffX > 150) {
if(pressedObj == lastLeftObj) {
$(pressedObj).animate({
marginLeft: "0"
}, 500); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
}
});
} // 网页在PC浏览器中运行时的监听
for(var i = 0; i < len; ++i) {
$(lines[i]).bind('mousedown', function(e) {
lastX = e.clientX;
pressedObj = this; // 记录被按下的对象
}); $(lines[i]).bind('mouseup', function(e) {
if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
$(lastLeftObj).animate({
marginLeft: "0"
}, 500); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
var diffX = e.clientX - lastX;
if(diffX < -150) {
$(pressedObj).animate({
marginLeft: "-132px"
}, 500); // 左滑
lastLeftObj && lastLeftObj != pressedObj &&
$(lastLeftObj).animate({
marginLeft: "0"
}, 500); // 已经左滑状态的按钮右滑
lastLeftObj = pressedObj; // 记录上一个左滑的对象
} else if(diffX > 150) {
if(pressedObj == lastLeftObj) {
$(pressedObj).animate({
marginLeft: "0"
}, 500); // 右滑
lastLeftObj = null; // 清空上一个左滑的对象
}
}
});
}
} $(function() {
init();
var pageNum = 1; function GetListPageFun() { //请求获取数据
var html = [];
for(var i = 0; i < 15; i++) {
html[i] = '<div class="line-wrapper"><div class="line-scroll-wrapper"><div class="line-normal-wrapper"><div class="line-normal-left-wrapper"><div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div><div class="line-normal-info-wrapper"> <div class="line-normal-user-name">蜡笔小新</div><div class="line-normal-msg">在同行的小伙伴中提到了你</div><div class="line-normal-time">1分钟前</div></div></div><div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div></div><div class="line-btn-delete"><button>删除</button></div></div></div>';
}
$("#data").append(html.join(""))
}
$(window).scroll(function() { //分页
if($(window).scrollTop() + $(window).height() >= $(document).height() - 30) { //滚动到底部时
pageNum += 1;
GetListPageFun();
init();
}
}); });
</script> <script type="text/javascript">
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .line-wrapper {
width: 100%;
height: 144px;
overflow: hidden;
font-size: 28px;
border-bottom: 1px solid #aaa;
} .line-scroll-wrapper {
white-space: nowrap;
height: 144px;
clear: both;
} .line-btn-delete {
float: left;
width: 132px;
height: 144px;
} .line-btn-delete button {
width: 100%;
height: 100%;
background: red;
border: none;
font-size: 24px;
font-family: 'Microsoft Yahei';
color: #fff;
} .line-normal-wrapper {
display: inline-block;
line-height: 100px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
} .line-normal-icon-wrapper {
float: right;
width: 120px;
height: 120px;
margin-right: 12px;
} .line-normal-icon-wrapper img {
width: 120px;
height: 120px;
} .line-normal-avatar-wrapper {
width: 100px;
height: 124px;
float: left;
margin-left: 12px;
} .line-normal-avatar-wrapper img {
width: 92px;
height: 92px;
border-radius: 60px;
} .line-normal-left-wrapper {
float: left;
overflow: hidden;
} .line-normal-info-wrapper {
float: left;
margin-left: 10px;
} .line-normal-user-name {
height: 28px;
line-height: 28px;
color: #4e4e4e;
margin-top: 7px;
} .line-normal-msg {
height: 28px;
line-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
color: #4e4e4e;
margin-top: 11px;
} .line-normal-time {
height: 28px;
line-height: 28px;
color: #999;
margin-top: 11px;
} .position {
display: none;
width: 80%;
padding: 0 5% 5% 5%;
margin: 5%;
}
.provincebox {
width: 25%;
float: left;
box-sizing: border-box;
padding: 10px 4px;
text-align: center;
}
.city_container {
border: 1px solid #ddd;
padding: 5px;
box-sizing: border-box;
border-radius: 3px;
font-size: 12px;
color:#333;
} </style>
</head> <body id="data">
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">乔巴</div>
<div class="line-normal-msg">你看不到我哦</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">贱行贱远</div>
<div class="line-normal-msg">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">小黄人</div>
<div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div>
<div class="line-wrapper">
<div class="line-scroll-wrapper">
<div class="line-normal-wrapper">
<div class="line-normal-left-wrapper">
<div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
<div class="line-normal-info-wrapper">
<div class="line-normal-user-name">蜡笔小新</div>
<div class="line-normal-msg">在同行的小伙伴中提到了你</div>
<div class="line-normal-time">1分钟前</div>
</div>
</div>
<div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
</div>
<div class="line-btn-delete"><button>删除</button></div>
</div>
</div> </body> </html>
jquery左划出现删除按钮，右滑隐藏的更多相关文章
- Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）
场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...
- js移动端向左滑动出现删除按钮
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...
- iOS开发之自定义导航栏返回按钮右滑返回手势失效的解决
我相信针对每一个iOS开发者来说~除了根视图控制器外~所有的界面通过导航栏push过去的界面都是可以通过右滑来返回上一个界面~其实~在很多应用和APP中~用户已经习惯了这个功能~然而~作为开发者的我们 ...
- Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（2）
ItemTouchHelper类 之前我们实现了滑动列表的一些基本功能,为了实现更多的效果,我们来仔细看一下ItemTouchHelper中的类: ItemTouchHelper.SimpleCall ...
- jQuery动态添加、删除按钮及input输入框
输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...
- 关于iOS自定义返回按钮右滑返回手势失效的解决:
在viewDidLoad方法里面添加下面这一句代码即可 self.navigationController.interactivePopGestureRecognizer.delegate=(id)s ...
- Android 浮动按钮+上滑隐藏按钮+下滑显示按钮
1.效果演示 1.1.关注这个红色的浮动按钮 . 可以看到,上滑的时候浮动按钮消失,因为用户迫切想知道下面的东西,而不是回到顶部. 当下滑的时候,用户想回到原来的位置,就可以点击浮动按钮,快速回到顶部 ...
- Android ListView实现仿iPhone实现左滑删除按钮
需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Override public boolean onTouchEvent(Moti ...
- [Xcode 实际操作]五、使用表格-(9)删除UITableView单元格(手势左滑调出删除按钮)
目录:[Swift]Xcode实际操作 本文将演示如何删除某一行单元格.手势左滑调出删除按钮. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...
随机推荐
- juc-locks包
1. 简介 java.util.concurrent.locks 包含常用的锁实现,重点研究AbstractQueuedSynchronizer.ReentrantLock.ReentrantRead ...
- ABP中的AutoMapper
在我们的业务中经常需要使用到类型之间的映射,特别是在和前端页面进行交互的时候,我们需要定义各种类型的Dto,并且需要需要这些Dto和数据库中的实体进行映射,对于有些大对象而言,需要赋值太多的属性,这样 ...
- JSP的部分知识(二）
指令include和动作include的区别 通过之前的学习知道,JSP最后会被转译成Servlet如果是指令include <%@include file="footer.jsp&q ...
- JDBC预编译statement（preparedstatement）和statement的比较、execute与executeUpdate的区别
和 Statement一样,PreparedStatement也是用来执行sql语句的与创建Statement不同的是,需要根据sql语句创建PreparedStatement除此之外,还能够通过设置 ...
- CodeForces-1159B-Expansion coefficient of the array
B. Expansion coefficient of the array time limit per test:1 second memory limit per test:256 megabyt ...
- 血小板 live2d web使用
关于此插件 看到一个很多网站都有动态的小人,目前除了即将废弃的flash就是canvas和h5动画了,h5动画能力有限,不能画出复杂的效果 那么canvas就是首选,全部手画也不可能,大部分使用库和工 ...
- 撸一个 vue 的截图组件，按比例截取
<template> <div class="clip-img" :style="imgStyle"> <img :src=&qu ...
- Docker学习笔记导航帖
1. Docker安装 安装docker https://www.cnblogs.com/kreo/p/10813010.html
- Emit用法
[转自]https://blog.csdn.net/xiaouncle/article/details/52890037 本人是从0开始学习Emit的,在学习过程中比较困扰我的就是有很多指令不理解.不 ...
- MP4数据封装格式
一 .MP4 https://blog.csdn.net/sdsszk/article/details/90719075 MP4 由很多个ATOM 嵌套构成,主要的ATOM包括 [ftyp] ...