转载请说明出处: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].pageX
var 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>
分享到:
相关推荐
Axure制作上下左右滑动的交互效果Axure制作上下左右滑动的交互效果Axure制作上下左右滑动的交互效果Axure制作上下左右滑动的交互效果Axure制作上下左右滑动的交互效果Axure制作上下左右滑动的交互效果Axure制作上下...
这可是我花了2天时间摸索敲打出来的,如果没积分的同学可以在http://blog.csdn.net/wowkk/article/details/22699611 留下你的邮箱。
安卓app开发项目-使用ViewPager实现左右滑动翻页(源码).zip安卓app开发项目-使用ViewPager实现左右滑动翻页(源码).zip安卓app开发项目-使用ViewPager实现左右滑动翻页(源码).zip安卓app开发项目-使用ViewPager实现...
(安卓APP项目源代码)使用ViewPager实现左右滑动翻页(安卓APP项目源代码)使用ViewPager实现左右滑动翻页(安卓APP项目源代码)使用ViewPager实现左右滑动翻页(安卓APP项目源代码)使用ViewPager实现左右滑动翻页...
uniapp 仿抖音上下滑动视频
最近公司做股票相关软件,界面需求是这样的,横向无限长,可以横向滚动,而且最左侧的那一竖栏要定住,网上找了写例子,都太复杂,这里来一个简单的。
QT的App滑动页面实现
经过几天对映客APP的分析研究,明白了映客上下滑动切换新的直播的实现原理,真心觉得做的挺赞的。。还是很流畅的,性能也很不错。 思路 首先是一个主Activity,里面只有一个ViewPager,当然了这个viewPager得是...
公司项目需要用到周月切换日历,然后就根据网上前辈的源码进行了深入定制,可以支持周月切换,上下滑动切换周月,左右滑动切换,支持显示节假日,以及农历显示,日期标记,源码加了大量注释,通俗易懂
基于Vue和Spring Boot的校园记录管理Web App的设计与实现.pdf
Android 界面禁止左右滑动切换
移动端app html5 图片滑动组件
最近开始了一个新的手机App项目,需要用到底部切换标签和左右滑动切换页面功能,做了个DEMO分享给大家,如果有什么错误希望大家指出,谢谢!
SwipeListView 支持定义ListView左右滑动事件,支持左右滑动位移,支持定义动画时间
帮助html页面实现在混合开发中的滑动删除功能,提高用户体验
本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码,供大家参考,具体内容如下 <home></home> <image click=isScale class=icon-style src=/static/iconImg/list.png xss=removed></image> <vi
基于SSH jQuery框架的餐饮Web App的设计与实现.pdf
自定义蚂蜂窝app滑动tab,实现波浪线滑动View
IOS左右滑动菜单(类似人人网APP)源码,下载即用。已验证。