svg以后会成为未来前端发展趋势，所以现在打好基础是必须。
学习Snap.svg跟学习jquery的语法很类似，懂jquery的同学上手学习Snap.svg会很快。
Snap.svg的作者就是著名的矢量库Raphael.js的作者，Adobe的员工Dmitry Baranovskiy. Raphael.js的优点在于兼容低版本的IE浏览器，借助VML语法。
作者http://www.zhangxinxu.com/wordpress/2014/01/snap-svg-study-demo-docs/
在线学习文档http://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.add.php
百度 手机 js touch 手势 拖拽 思路
详细文档：http://cloudajs.org/docs/step4_API_Documentation#h2_7
百度touch.js手机监听事件分类：
缩放、 旋转、 滑动、 拖动开始 、拖动 、拖动结束、 长按、 敲击。
其中类中还详细分不同的触发事件。
//第一次拖拽
var dx, dy;
touch.on('#target', 'drag', function(ev){
dx = dx||0; //第一次拖拽dx是没有值的所以dx=0,等第一次拖拽完了之后在拖拽第二次dx的值就记录了 dragend 中的dx的值
dy = dy|| 0;
console.log('开始拖拽记录上次位置：'+dx+'---'+dy);
this.style.webkitTransform = "translate3d(" + (dx+ev.x)+'px' + "," + (dy+ev.y)+'px' + ",0)"; //第一次拖拽X轴的值是0+ev.x
});
touch.on('#target', 'dragend', function(ev){ //第一次停止拖拽时候dx是0的
dx = dx+ev.x; //第一次拖拽停止dx的值是0的 也就是0+第一次当前拖拽的值
dy = dy+ev.y;
console.log('结束记录位置：'+dx+'---'+dy);
//log("当前x值为:" + dx + ", 当前y值为:" + dy +".");
});
//第二次开始拖拽
// dx = dx||0; 第二次开始拖拽dx有值了就是第一次开始拖拽保留的临时值0+ev.x的值
// this.style.webkitTransform = "translate3d(" + (dx+ev.x)+'px' + "," + (dy+ev.y)+'px' + ",0)";
// 第二次拖拽当然是在第一停止的位置开始拖拽了所以是 第一拖拽停止所在位置的值+当前正在拖拽的值
// dx = dx+ev.x; //第二次结束要保留第二所停留的位置 第一次停止位置+当前拖拽的值
// 这里的难点就是 临时变量的定义的技巧 dx = dx||0 ;
支持的手势事件类型：
| 分类 | 参数 | 描述 |
|---|---|---|
| 缩放 | pinchstart | 缩放手势起点 |
| pinchend | 缩放手势终点 | |
| pinch | 缩放手势 | |
| pinchin | 收缩 | |
| pinchout | 放大 | |
| 旋转 | rotateleft | 向左旋转 |
| rotateright | 向右旋转 | |
| rotate | 旋转 | |
| 滑动 | swipestart | 滑动手势起点 |
| swiping | 滑动中 | |
| swipeend | 滑动手势终点 | |
| swipeleft | 向左滑动 | |
| swiperight | 向右滑动 | |
| swipeup | 向上滑动 | |
| swipedown | 向下滑动 | |
| swipe | 滑动 | |
| 拖动开始 | dragstart | 拖动屏幕 |
| 拖动 | drag | 拖动手势 |
| 拖动结束 | dragend | 拖动屏幕 |
| 拖动 | drag | 拖动手势 |
| 长按 | hold | 长按屏幕 |
| 敲击 | tap | 单击屏幕 |
| doubletap | 双击屏幕 |
案例：http://touch.code.baidu.com/examples.html
本站实例：https://sdeno.com/zp/baidutouch/
结合百度插件案例：《基于百度手势插件实现手机幻灯片效果》
ajax 滚动加载
在这篇文章中，我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件，这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高，如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。我们一起来看看下面这些优秀的分页插件。
jPages 是一款非常不错的客户端分页插件，有很多特色，例如自动播放、按键翻页、延迟加载等等。
jPaginate 是一款非常精致的分页插件，提供了五种形式的DEMO，支持鼠标悬停翻页功能。
SimplePager 是非常简洁的 jQuery 分页插件，用最少的参数配置实现满足需要的分页功能。
jQuery 滚动翻页插件 由 Anderson Ferminiano 开发，可以在项目中免费使用。
jqPagination 提供了一种新颖的分页方式，用表现当期所处的页码形式取代传统的页码列表模式。
jPaginator 这款分页插件用于改进长翻页列表的用户体验，使用一个滑动条来快速翻页。
Sausage 是一款非常优秀的分页插件，用于实现页面的无限制滚动分页功能。
Xarg jQuery 分页插件，有多种分页形式供选择，可以帮助你实现各种需求的分页效果。
jPaginator 是一款非常轻量的 jQuery 分页插件，也非常有特色，提供了方便使用的滑动翻页功能。
这款分页插件虽然效果简洁，但是是学习 jQuery 翻页功能非常好的例子。
Sweet Pages 是效果非常精美的一款分页插件，效果有点类似于幻灯片的翻页。
最后推荐的这款 jQuery 分页插件拥有充满吸引力的动画效果，相信你会喜欢的。
http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html
<link rel="stylesheet" type="text/css" href="css/wPaginate.css"> <script type="text/javascript" src="js/wPaginate.js"></script>
配置：
$('#wPaginate8').wPaginate({
theme : 'black', // theme for plugin to use
first : '<<', // html for first page link (null for no link)
prev : '<', // html for prev page link (null for no link)
next : '>', // html for next page link (null for no link)
last : '>>', // html for last page link (null for no link)
spread : 5, // 左边显示6个可点击的页面 右边显示也显示6个可点击的页码 中间一个页面，显示的页面始终是奇数
total : 400, // 一共400条数据
index : 0, // current index (0, 20, 40, etc) //这里不是当前分页的意思
limit : 20, // 每页显示20跳
url: function(i) { //i参数是当前分页
alert(this.settings.limit) //获取之前设置的参数
$.ajax({
type:'post',
url:"table1.html",
data:{page:i},
success: function(data){
$("#table_list").empty().html(data);
}
});
},
ajax: true
});
关闭ajax功能
$("#elem").wPaginate({
theme: 'red',
total: 123,
index: 40,
limit: 20,
url: function(i){ return '/some/page=' + i ; }, // url /some/page=3
ajax:false
});
HTML:
<div id="table_list">
默认显示第一条数据
</div>
<div id="wPaginate8"></div>
不刷新ajax分页
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.pagination.js"></script>
配置参数：
//此demo通过Ajax加载分页元素
var initPagination = function() {
var num_entries = $("#hiddenresult div.result").length;
// 创建分页
$("#Pagination").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: pageselectCallback,
items_per_page: 1, //每页显示1项
prev_text: "前一页",
next_text: "后一页"
});
};
function pageselectCallback(page_index, jq){
var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
$("#Searchresult").empty().append(new_content); //装载对应分页的内容
return false;
}
//ajax加载
$("#hiddenresult").load("table1.html", null, initPagination);
HTML：
<div id="Searchresult">分页初始化完成后这里的内容会被替换。</div> <div id="hiddenresult" style="display:none;"> <!-- 列表元素 --> </div> <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
table1.html需要加载部分：
<div class="result">表1</div> <div class="result">表2</div> <div class="result">表3</div>