function bindSwiper(){
var events = {start: 'touchstart', move: 'touchmove', end: 'touchend'},
move_last_x = 0,
move_last_y = 0,
end = 0,
left_or_right = '',
event_center = {
_touchMove_start : function(e,obj){
move_last_x = e.originalEvent.touches[0].clientX;
move_last_y = e.originalEvent.touches[0].clientY;
eventTouch = 0;
},_touchMove_move : function(e,obj){
eventTouch = 1;
if ( move_last_x < 1)return;
end = 1;
var x = e.originalEvent.touches[0].clientX;
if(move_last_x > x){
left_or_right = 'left';
}else{
left_or_right = 'right';
}
},_touchMove_end : function(e,obj){
if ( end < 1 ) {
return;
}
end = 0;
if(left_or_right == 'left'){
if(pageNumber % 2 == 0){
pageNumber +=2;
}else{
pageNumber +=1;
}
toPageNumber(pageNumber);
}else{
if(pageNumber % 2 == 0){
pageNumber -=1;
}else{
pageNumber -=2;
}
toPageNumber(pageNumber);
}
}
};
$("#topdiv").bind(events.start,function(e){event_center._touchMove_start(e,function(){})});
$("#topdiv").bind(events.move,function(e){event_center._touchMove_move(e,function(){})});
$("#topdiv").bind(events.end,function(e){event_center._touchMove_end(e,function(){})});
}
分享到:
相关推荐
javaScript实现图片在页面的滑动效果,让你的界面更加美化。(注:转自cloudgamer博客)。
iSlider手机平台JS滑动组件实现的图片滑动衰减效果,循环效果,自动滑动效果,水平垂直滑动效果。兼容主流浏览器
js实现滑动轮播效果 本文实例为大家分享了js实现滑动轮播效果的具体代码,供大家参考,具体内容如下 1、构建html样式,代码如下 <div class="banner"> <ul> <li> <a href="#" > <img src="images/1.jpeg"> ...
jd51.net实现图片滑动效果,里面可以加动画和外链其他html
纯js实现导航栏跟随鼠标的滑动效果,兼容ie8及其以上。
主要介绍了超实用的javascript图片滑动效果实现方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
模仿微信向左滑动删除,利用js实现滑动效果
HTML调用JS实现多项滑动门选项卡特效 国开电大Dreamweaver网页设计形考任务八答案, 更新版国家开放大学/电大专科《Dreamweaver网页设计》形考任务八。
使用JavaScript实现的滑动式轮播图效果。轮播图图片使用自动添加img标签实现,图片个数只需修改图片数组的内容,在数组中添加图片名称即可。
原生JavaScript结合css3 实现的一个拼图滑动验证框 该滑动框只需要你提供一张自己的背景图片,即可实现对应的效果
点击按钮滑动图片,js实现像QQ网站上的效果一样
主要为大家详细介绍了js实现移动端导航点击自动滑动效果,导航可左右滑动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了js实现滑动门效果的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JS实现的鼠标悬停滑动效果导航条源码.zip
主要为大家详细介绍了JavaScript实现滑动导航栏效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这种动画,看起来很像TAB菜单,不过TAB菜单没办法实现图片左右滑动的效果。很像那种123456的幻灯片,不过它用不到swf文件,还算牛! Math.round,这样的东西一看就会让人想到圆形循环,这个我立即想到了...
本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下
用js实现选择卡下划线滑动效果,简单又好看。
zepto.js插件适用于微信等移动浏览器动画滑动效果