23web app实现上下左右滑动

转载请说明出处：http://blog.csdn.net/wowkk/article/category/1619287 （创意系列）

/*近期项目需要苹果电脑，如果您支持学生创业并愿意赞助我们一台，请联系我QQ696619，您可以提前获取16页创意文档，或者我们可以帮助开发一些小项目*/

原本要做一种效果：上下左右滑动页面，可以切换到图片（表格布局）。

效果实现了，但还没应用上。

//--------图片滑动导航---------var startX; //触摸起始横坐标var startY; //触摸起始纵坐标var moveSpave; //移动的距离var isMoveX = true; //判断是否为左右移动var isFirst = true;   //是否要判断touchmove方向$("#imgSelect").on("touchstart touchmove touchend touchcancel", function (e) {e.preventDefault(); //该区域禁止滑动切换页面if (e.originalEvent.type == "touchstart") {startX = e.originalEvent.touches[0].pageX; //触摸起始位置赋值startY = e.originalEvent.touches[0].pageY; //触摸起始位置赋值isFirst = true;}else if (e.originalEvent.type == "touchmove") {var moveX = e.originalEvent.touches[0].pageXvar moveY = e.originalEvent.touches[0].pageY;if (isFirst) {Math.abs(moveX - startX) - Math.abs(moveY - startY) >= 2 ? isMoveX = true : isMoveX = false;isFirst = false;return;}if (isMoveX) {//水平滑动moveSpave = moveX - startX;}else {//竖直滑动moveSpave = moveY - startY;}}else if (e.originalEvent.type == "touchend") {if (isMoveX) {if (moveSpave < 0 && j <= 2) {//向左滑动Add("#topLight", j+1); //开关对应灯j = j + 1;}else if (moveSpave > 0 && j >= 1) {//向右滑动Sub("#topLight", j+1);j = j - 1;}}else {if (moveSpave < 0 && i <= 2) {//向上滑动Add("#rightLight", i + 1); //开关对应灯i = i + 1;}else if (moveSpave > 0 && i >= 1) {//向下滑动Sub("#rightLight", i + 1); //开关对应灯i = i - 1;}}$("#imgClick").attr("src", arrImg[i][j]);}

//------function Add(id, x) {var idd = id + x;$(idd).attr("src", "img/Select_Off.png");x = x + 1;idd = id + x;$(idd).attr("src", "img/Select_On.png");}function Sub(id, x) {var idd = id + x;$(idd).attr("src", "img/Select_Off.png");x = x - 1;idd = id + x;$(idd).attr("src", "img/Select_On.png");}

<span id="topLight"><!--横向指示灯--><img id="topLight1" src="img/Select_On.png" /><img id="topLight2" src="img/Select_Off.png" /><img id="topLight3" src="img/Select_Off.png" /><img id="topLight4" src="img/Select_Off.png" /></span><div id="rightLight"><!--竖向指示灯--><img id="rightLight1" class="rightImg" src="img/Select_Off.png" /><img id="rightLight2" class="rightImg" src="img/Select_On.png" /><img id="rightLight3" class="rightImg" src="img/Select_Off.png" /><img id="rightLight4" class="rightImg" src="img/Select_Off.png" /></div>

23web app实现上下左右滑动相关推荐

Android 可滑动表格的简单实现（类似于excel表格，支持上下左右滑动）
前言最近遇到一个需求,以表格的形式模拟样本盒的显示,最初设想是利用RecyclerView网格形式实现,然而需求是盒子行列数目不固定,可能存在手机屏幕一屏显示不下的情况,因此需要做成可以上下左右滑动 ...
Android上下左右滑动，显示底层布局
转载博客地址:http://www.cnblogs.com/flyme2012/p/4106308.html 闲着没事做了一个小东西.Android的上下左右滑动,显示底层布局.可以做类似于QQ消息列 ...
axure 元件_Axure动态面板（上下左右滑动页面）
(2月24日更新)B站视频版教程:https://www.bilibili.com/video/av80136342/ 手机端交互中,页面的上下左右滑动是常用的交互形态,今天给大家分享一下如何使用Ax ...
html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例
本篇文章小编给大家分享一下html中table固定头部表格tbody可上下左右滑动代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 当表格头部固 ...
android美团底部栏实现,仿美团APP的底部滑动菜单实现
背景:在现在的APP的应用中,类似仿美团APP的底部滑动菜单,应用是挺多的,例如QQ,微信,支付宝都应用到. 开发流程 1)设置selector(背景选择器),在res的目录下建立新的文件夹(draw ...
Appium_swipe模拟上下左右滑动操作
测试的同学们在做app自动化测时,经常会用到查找元素.定位元素.发送数据.长按.点击.上滑.下滑.左滑.右滑等操作.下面讲下用appium自带的swipe方法怎么实现上滑. 下滑.左滑.右滑. 前置 ...
android 嵌套分组拖动_GitHub - Mosect/DragLayout: Android拖拽控件，支持上下左右滑动、折叠或者嵌套ListView、RecyclerView等...
DragLayout Android拖拽布局,包括以下布局: DragLayout 基础布局类 FlowLayout 可折叠布局,继承DragLayout DragRefreshLayout 拖拽刷新 ...
Android可上下左右滑动的列表
前言: 最开始使用的HorizontalScrollView和ListView当数据量上去之后发现有些低性能的手机变得卡顿,手机屏幕刷新会黑屏(黑平的时候我都惊呆了) 实现废话不多说了接下来实现功能 ...
22web app实现左右滑动控制菜单
模仿相册app tidy做个html5的web app,完全不考虑桌面版本,所以ie什么的不要测试,需要模拟器测试. 因为找不到合适的js插件,最后就自己写了代码. //希望有这方面资料的同学,一起交 ...

23web app实现上下左右滑动

23web app实现上下左右滑动相关推荐

最新文章

热门文章