太阳娱乐:Silverlight实用窍门系列:17.中心点联动多线的可拖动控件(绘制工程图、拓扑图基础)【附带源码实例】

太阳娱乐 20

太阳娱乐:Silverlight实用窍门系列:17.中心点联动多线的可拖动控件(绘制工程图、拓扑图基础)【附带源码实例】

原标题:Axure教程:如何实现爱彼迎App首页Banner的切换效果

太阳娱乐 1拼图

        工欲善其事必先利其器。Axure学习成本不高,但易懂难精,使用了半天如果仅仅停留在画出灰度原型基本用法,不免逼格低。如果想做点交互,往往会涉及到变量和函数。使用变量和函数做出的交互原型扩展性强,灵活度高,并且往往一个函数就能顶上一堆用例。能用好函数无疑对我们的工作效率有极大的提升。

移动端touch事件判断滑屏手势的方向

        本节是继上节所讲述的基础上做出一些调整而来,如有疑问可参考上节文章。

本文分享一个用Axure实现爱彼迎App首页Banner切换效果的方法,供大家参考,欢迎一起交流。

Axure RP 9 beta 绘制原型

       
函数不用死记,只需要通读一遍知道Axure函数大概能做什么事情,然后在需要的时候进行查询就行。

方法一

       
在实际项目中可能会遇到绘制各类工程图或者网络拓扑图之类的情况,这类图基本上都是以设备加线的方式连接在一起的。那么一个中心设备连接多个外围设备的展示方式就是本节需要讲述的内容。上节已经讲了如何绘制一个以某点为圆心绘制出多条线,且线和线之间的角度需要相同来组成一个圆的图。在这个图的中心点加一个设备牵动所有的线的中心点的变化同时在外围点也加一个设备。中心设备和外围设备都可以随意拖动。中心设备的拖动牵连所有与中心设备关联的设备拖动。下面请看Silverlight运行预览图:

太阳娱乐 2

Camtasia 2018 录屏及导出gif

Axure函数分为十类:

  1. 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;
  2. 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。

太阳娱乐 3
在线演示)

作者最近闲暇时间试着将爱彼迎App的Banner切换效果用Axure实现出来,网上类似的教程不多,所以给大家分享一下。本文没有将每一个步骤分享出来,而是提供一个实现的思路。对Axure的初学者来说可能有点难懂,后面会提供源文件下载。

Adobe Photoshop CC 2017 处理图片

元件函数

思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动;X的结果如果负数,则说明手指是从右往左划动;Y的结果如果正数,则说明手指是从上往下划动;Y的结果如果负数,则说明手指是从下往上划动。

       
在Photoshop里面绘画两个不同颜色的球(绿色和黄色),其直径皆为44像素,保存为Png图片。再在Silverlight项目中添加这两个球的图片。设置黄球图片为中心点,在MainPage.xaml文件中的Canvas下面添加此球图片:

下图是将要实现的效果截屏:

函数使用:

鼠标指针函数

具体代码如下

<Image
x:Name=”img1″
Source=”yellow.png”
Width=”44″
Visibility=”Collapsed”
Canvas.ZIndex=”300″
Height=”44″></Image>

太阳娱乐 4

[[Math.abs]]:取绝对值

窗口函数

    var mybody = document.getElementsByTagName(‘body’)[0];

       
设置这个图片可以被拖动,且在拖动的同时让所有的线的起始点始终在这个圆的圆心位置,需要使用行为MouseDragElementBehavior,所以引入Microsoft.Expression.Interactions.dll、Microsoft.Expression.Prototyping.Interactivity.dll和System.Windows.Interactivity.dll。并且在代码也中using
Microsoft.Expression.Interactivity.Layout;。此时MainPage.xaml.cs的代码如下:

几个需求点 1. 到边界时的拖动阻尼&回弹效果(见下图)

&&:代表“且”,a&& b 表示a与b均返回true才返回true

页面函数

   

public
partial class
MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
//让img1图片控件具有MouseDragElementBehavior行为,且为让此控件在拖动过程中执行dragBehavior_Dragging事件。
dragBehavior.Attach(this.img1);
dragBehavior.Dragging +=
new MouseEventHandler(dragBehavior_Dragging);
//初始化时默认点击函数
button1_Click(new
object(), new
RoutedEventArgs());
}
MouseDragElementBehavior dragBehavior =
new MouseDragElementBehavior();
//放所有的线的集合
private
List<ucLine>
ucLineList=new
List<ucLine>();
private void
button1_Click(object sender, RoutedEventArgs e)
{
CanvasDevice.Children.Clear();
//获取需要设置多少条线
double
lineCount=double.Parse((this.comboBox1.SelectedItem as
ComboBoxItem).Content.ToString());
//获取需要设置的线的长度
double
lineLenth = double.Parse(this.textBox1.Text.ToString());
//设置平均角度
double
angle = 360.0
/ lineCount;
//设置线的起始点的坐标
double
centerX = 250;
double centerY =
250;
for (int i
= 0; i
< lineCount; i++)
{
ucLine dline = new
ucLine();
//设置线的半径
dline.R =
lineLenth;
//设置线的起始点的坐标
dline.CenterX =
centerX;
dline.CenterY = centerY;
//设置这根线的角度
dline.AngleAll = angle
* (i);
CanvasDevice.Children.Add(dline);
//将所有的线添加到线集合中去,以供拖动过程中使用
ucLineList.Add(dline);
}
//设置img1可见,设置其初始位置。
this.img1.Visibility =
Visibility.Visible;
img1.SetValue(Canvas.LeftProperty, centerX –
22.0);
img1.SetValue(Canvas.TopProperty, centerY –
22.0);
}
/// <summary>
/// img1被拖动的时候触发的事件
/// </summary>
/// <param
name=”sender”></param>
/// <param
name=”e”></param>
void
dragBehavior_Dragging(object
sender, MouseEventArgs e)
{
MouseDragElementBehavior dragBehavior2 = sender
as MouseDragElementBehavior;
//获取到控件被拖动后的位置坐标
double x1
= dragBehavior2.X +
22;
double y1 =
dragBehavior2.Y + 22;
foreach (ucLine dline in
ucLineList)
{
//设置lineD线的起点坐标为移动后的坐标位置
dline.LineD.X1 = x1;
dline.LineD.Y1 = y1;
}

太阳娱乐 5

|| :代表“或”,a||b 表示a或b任一一个返回true就返回true,否则返回false

数字函数

    //滑动处理

}
}

  1. 停止拖动时若为非正常位置,则自动归位(见下图)

[[this.x]]:元件当前横坐标位置

数学函数

    var startX, startY, moveEndX, moveEndY, X, Y;   

        这些代码是在上一节的基础上进行了一部分的修改,所有的注释都在代码中,需要注意的是比如double
x1 = dragBehavior2.X +
22,这里的22这个数字是黄球的半径,是为了让这些线集中在黄球的中心点位置上,而不是集中在黄球的左上角位置。这个是计算的坐标。

太阳娱乐 6

[[this.y]]:元件当前纵坐标位置

时间函数

    mybody.addEventListener(‘touchstart’, function(e) {

       
中心点设备添加成功了!那么现在该为线的另一点添加绿色球设备,并且让绿色球设备可以被拖动。ucLine.xaml代码中需要添加一句:

  1. 快速拖动时,自动切换到下一个Banner(见下图)

逻辑描述

字符串函数

        e.preventDefault();

<Image x:Name=”green”
Source=”green.png”
Width=”44″
Canvas.ZIndex=”300″
Height=”44″></Image>

太阳娱乐 7

以上是本案例使用的函数,接下来介绍实现小图块移动的逻辑:(下边内容繁杂,不愿意阅读的同行可以直接下载原型研究哈)我们知道,拼图游戏在操作的过程中,是空白位置相邻的图片移动到空白位置,我们设置每个小图块长宽均为100,那么不难发现,可以移动到空白位置的图片坐标距离空白图片坐标距离为100,那么我们在设置移动条件的时候,就以图片距离为依据。

中继器函数

        startX = e.touches[0].pageX;

       
ucLine控件的代码页主要是为绿色球添加拖动控件,在拖动的过程中,也要让线的结尾点坐标跟随到拖动的绿色球位置。其ucLine.xaml.cs代码修改如下:

4.
左右拖动时,限制页面上下拖动;上下拖动时,限制Banner左右拖动(见下图)

假定某张图片的坐标为,空白图片的坐标为,^2+^2=两图片距离^2,按照这样的公式可以判断图片与空白图片的距离是否为100,考虑到这样的公式很难在Axure内表达,因此我们简化公式:

布尔运算

        startY = e.touches[0].pageY;

public
partial class
ucLine : UserControl
{
public ucLine()
{
InitializeComponent();
dragBehavior.Attach(this.green);
dragBehavior.Dragging +=
new MouseEventHandler(dragBehavior_Dragging);
}
MouseDragElementBehavior dragBehavior =
new MouseDragElementBehavior();
private double
_R;
private double
_AngleAll;
private double
_centerX;
private double
_centerY;

因为该Banner区域即能左右拖动,切换Banner,也能上下拖动进行页面的拖动,所以如果不做限制,则会出现拖动时Banner与页面同时移动的情况。

X1-X2=±100且Y1-Y2=0时→图块可移动

Axure函数的基本语法

在axure交互设计时,函数可以用在条件公式和需要赋值的地方,其基本语法是用双方括号包含,变量值和函数用英文句号连接。如:[[LVAR.
Width]] 表示变量LVAR的宽度。[[This. Width]] 当前元件的宽度

    });

/// <summary>
/// 中心圆半径
/// </summary>
public
double R
{
get { return _R;
}
set { _R = value;
}
}
private double
_X2;
private double
_Y2;
/// <summary>
/// 指定本控件的X2坐标
/// </summary>
public
double X2
{
get { return
_X2; }
set
{
_X2 = value;
this.LineD.X2 =
this.X2;
}
}
/// <summary>
/// 指定本控件的Y2坐标
/// </summary>
public
double Y2
{
get { return
_Y2; }
set
{
_Y2 = value;
this.LineD.Y2 =
this.Y2;
}
}
/// <summary>
/// 本控件的中心原点X坐标
/// </summary>
public
double CenterX
{
get { return
_centerX; }
set
{
_centerX = value;
this.LineD.X1 =
_centerX;
}
}
/// <summary>
/// 本控件的中心原点Y坐标
/// </summary>
public
double CenterY
{
get { return
_centerY; }
set
{
_centerY = value;
this.LineD.Y1 =
_centerY;
}
}
/// <summary>
/// 本控件的起始线弧度
/// </summary>
public
double AngleAll
{
get { return
_AngleAll; }
set
{
_AngleAll = value;
//计算得到角度,然后复制给线的终点坐标位置。注意:设置线终点坐标时须加入线的起点位置
double
sinAngle = Math.Sin(this.AngleAll * Math.PI
/ 180);
double cosAngle =
Math.Cos(this.AngleAll * Math.PI
/ 180);
this.LineD.X2 = cosAngle
* this.R

太阳娱乐 8

X1-X2=0且Y1-Y2=±100时→图块可移动

元件函数详解

this      
获取当前元件对象。当前元件是指当前添加交互动作的元件。如:this.text获取当前选中元件上的文字内容

target    
 目标元件,指指当前交互动作控制的元件。如:targets.text就是获取当前交互动作控制的元件上的文字内容

widget.x     获取指定元件的X轴坐标;

widget.y     获取指定元件的Y轴坐标;

widget.width     获取指定元件的宽度值。

widget.height    获取指定部件的高度值

widget.scrollX    获取动态面板水平滚动距离

widget.scrollY    获取动态面板垂直滚动距离

widget.text      获取指定元件上的文字内容;

widget.name         获取指定元件的自定义名称;

widget.top      获取元件的的顶部位置或坐标。

widget.left      获取元件的的左侧位置或坐标。

widget.right       获取元件的的右侧位置或坐标。

widget.bottom     获取元件的的底部位置或坐标。

widget.opacity      获取元件的不透明比例。

widget.rotation       获取元件的旋转角度。

    mybody.addEventListener(‘touchmove’, function(e) {

  • this.CenterX;
    this.LineD.Y2 =
    this.CenterY – sinAngle
    * this.R;
    //设置绿色球的坐标位置。
    this.green.SetValue(Canvas.LeftProperty,
    this.LineD.X2 –
    22);
    this.green.SetValue(Canvas.TopProperty, this.LineD.Y2 –
    22);
    }
    }
    /// <summary>
    /// green被拖动的时候触发的事件
    /// </summary>
    /// <param
    name=”sender”></param>
    /// <param
    name=”e”></param>
    void
    dragBehavior_Dragging(object
    sender, MouseEventArgs e)
    {
    MouseDragElementBehavior dragBehavior2 = sender
    as MouseDragElementBehavior;
    double x1 =
    dragBehavior2.X + 22;
    double y1 =
    dragBehavior2.Y + 22;
    //设置本条线的结尾点坐标为拖动后的坐标
    this.LineD.X2 = x1;
    this.LineD.Y2 = y1;
    }
    }

需要处理的几个需求点明确了,再就是如何通过Axure的函数功能来实现了。本文会用到以下几种函数:

否则,图块无法移动,此时当鼠标单击元件时,判断是否符合移动条件,移动条件转化为Axure语言就是:

鼠标指针函数详解

Cursor.x        鼠标指针在页面中位置的X轴坐标。

Cursor.y        鼠标指针在页面中位置的Y轴坐标。

DragX        
鼠标指针沿X轴拖动元件时的瞬间(0.01秒)拖动距离。(即元件拖动速度)

DragY    
 鼠标指针沿Y轴拖动元件时的瞬间(0.01秒)拖动距离。(即元件拖动速度)

TotalDragX    
 鼠标指针拖动元件从开始到结束的X轴移动距离。(即X轴移动总距离)

TotalDragY      
鼠标指针拖动元件从开始到结束的Y轴移动距离。(即Y轴移动总距离)

DragTime      
 鼠标指针拖动元件从开始到结束的总时长。鼠标左键按下后拖动部件移动时,时间开始累积,鼠标不动也会累积时间;鼠标左键释放后时间停止积累,再次点击拖动时时间重置为默认(0);时间累积单位为毫秒。

        e.preventDefault();

       
现在所有的动画已经完成,本实例采用VS2010+Silverlight编写,点击 SLLineForYell.rar
下载实例源码:

  1. TotalDragx和TotalDragy

[[Math.abs(This.y/100-ly)==0 && Math.abs(lx-This.x/100)==1 ||
Math.abs(This.y/100-ly)==1 &&Math.abs(lx-This.x/100)==0]]

窗口函数详解

Window.width      打开原型页面的浏览器当前宽度。

Window.height       打开原型页面的浏览器当前高度。

Window.scrollX       浏览器中页面水平滚动(滚动栏拖动)的距离。

Window.scrollY       浏览器中页面垂直滚动(滚动栏拖动)的距离。

        moveEndX = e.changedTouches[0].pageX;

获取拖动元件从开始到结束的沿X或Y轴移动距离

其中,lx和ly是我们设置的局部变量,具体含义下文继续描述。

页面函数详解

PageName       获取当前页面的名称。

        moveEndY = e.changedTouches[0].pageY;

  1. DragTime

图片移动的逻辑基本成型,接下来说说如何记录空白图片的位置:我们画出四个框,命名为X,Y,X*100,Y*100,分别代表当前空白位置的位置及坐标,坐标我们用距离表示,位置我们用0、1、2表示,如下图所示,图片的坐标和位置可以一一对应:

数字函数详解

toExponential(decimalPoints)  
 
把数值转换为指数计数法。decimalPoints保留的小数位数,为0 ~ 20
之间的值,包括 0 和
20,有些实现可以支持更大的数值范围。如果省略了该参数,将使用尽可能多的数字。返回
LVAR1
的字符串表示,采用指数计数法,即小数点之前有一位数字,小数点之后有decimalPoints位数字。该数字的小数部分将被舍入,必要时用
0 补足,以便它达到指定的长度。如:LVAR1 =
10000;[[LVAR1.toExponential(1)]];输出:1.0e+4

toFixed(decimalPoints)    
 将一个数字转为保留指定位数的小数,小数位数超出指定位数时进行四舍五入。decimalPoints保留的小数位数,为0
~ 20 之间的值,包括 0 和
20,有些实现可以支持更大的数值范围。如果省略了该参数,将用0代替。如:LVAR1
= 13.37;设置文本部件1的值= [[LVAR1.toFixed(1)]];输出:13.4

toPrecision(length)  
  把数字格式化为指定的长度。length被转换为指数计数法的最小位数。该参数是
1 ~ 21 之间(且包括 1 和
21)的值。length为格式化后的数字长度,小数点不计入长度。如:LVAR1=10000;设置文本部件1的值为:[[LVAR1.toPrecision(4)]];输出:1.000e+4。

        X = moveEndX – startX;

获取拖动元件从开始到结束的时间,单位毫秒ms。

太阳娱乐 9

数学函数详解

+     数的和     语法:[[LVAR1+LVAR2]]

–     数的差     语法:[[LVAR1-LVAR2]]

*     数的乘积     语法:[[LVAR1*LVAR2]]

/     数的商     语法:[[LVAR1+LVAR2]]

%     数的余数     语法:[[LVAR1%LVAR2]]

Math.abs(x)     数的绝对值。 参数:x为数值。  如:LVAR1 =
-3.14;[[Math.abs(LVAR1)]];返回:3.14

Math.acos(x)      获取一个数值的反余弦值,返回的值是 0~
PI之间的弧度值 。 参数:x为数值,范围在 -1~1 之间。

Math.asin(x)      获取一个数值的反正弦值,返回的值是 -PI/2 到 PI/2
之间的弧度值。 参数:x为数值,范围在 -1~1 之间。

Math.atan(x)      获取一个数值的反正切值,返回的值是 -PI/2 到 PI/2
之间的弧度值。 参数:x为数值。

Math.atan2(y,x)      获取某一点(x,y)的角度值。
参数:“x,y”为点的坐标数值。返回值:-PI到 PI 之间的值,是从 X
轴正向逆时针旋转到点(x,y)时经过的角度。

Math.ceil(x)      向上取整函数,获取大于等于
x,并且与它最接近的整数。
参数:x为数值。如:ceil(0.4),输出1;ceil(5.1),输出6;ceil(-5.9),输出-5

Math.cos(x)      获取一个数字的余弦函数,返回的是 -1.0 到 1.0
之间的数。 参数:x为弧度数值。

Math.exp(x)      指数函数,计算以e为底的指数。 参数:x为数值。返回 e
的 x 次幂。e
代表自然对数的底数,其值近似为2.71828。如:exp(1),输出:2.718281828459045

Math.floor(x)      向下取整函数,获取小于等于 x,且与 x
最接近的整数。
参数:x为数值。如:floor(0.4),输出0;floor(5.1),输出5;floor(-5.9),输出-6

Math.log(x)      对数函数,计算以e为底的对数值。
参数:x为数值。如:log(2.7183),输出1.0000066849139877

Math.max(x,y)     获取参数中的最大值。
参数:“x,y”表示多个数值,而非2个数值。

Math.min(x,y)     获取参数中的最小值。
参数:“x,y”表示多个数值,而非2个数值。

Math.pow(x,y)      幂函数,计算x的y次幂。
参数:x为底数,必须是数字;y为幂数,必须是数字

Math.random()     随机数函数,返回一个0~1之间的随机数。
示例:获取10-15之间的随机小数,计算公式为Math.random()*5+10。

Math.sin(x)      一个数值的正弦函数。
参数:x为弧度数值。一个以弧度表示的角。将角度乘以0.017453293
(2PI/360)即可转换为弧度。

Math.sqrt(x)      一个数的平方根。 参数:x为数值。

Math.tan(x)     一个角的正切函数。 参数:x为弧度数值。

        Y = moveEndY – startY;

  1. Math.abs(x)

上图中写出了四个方块的位置和坐标,其他的以此类推。下面也就是最后的记录方式了,记录方式在这里不啰嗦,大家自行下载原型相信很容易便可以理解。

时间函数详解

Now    
根据计算机系统设定的日期和时间返回当前的日期和时间值。如:设置元件文本的值为:[[Now]];输出:Mon
Jan 08 2018 10:42:55 GMT+0800 (中国标准时间)。GMT(Greenwich Mean
Time)代表格林尼治标准时间。而CST却同时可以代表如下 4
个不同的时区:Central Standard Time (USA) UT-6:00美国;Central Standard
Time (Australia) UT+9:30澳大利亚;China Standard Time UT+8:00中国;Cuba
Standard Time UT-4:00古巴。

GenDate    
根据计算机系统设定的日期和时间返回当前原型生成时的日期和时间值。

getDate()     获取日期对象返回一个月中的日期的数字(1 ~ 31)。

getDay()     获取日期对象返回表示星期的某一天的数字。(0 ~
6)。返回值是 0(周日) 到 6(周六) 之间的一个整数。

getDayOfWeek()      获取日期对象返回表示星期的某一天的名称(英文)。

getFullYear()      获取日期对象“年份”部分四位数字。

getHours()      获取日期对象“小时”部分数字(0 ~ 23)。

getMilliseconds()     获取日期对象的毫秒数(0 ~ 999)。

getMinutes()      获取日期对象“分钟”部分数值(0 ~59)。

getMonth()      获取日期对象“月份”部分的数值(1 ~ 12)。

getMonthName()      获取日期对象“月份”部分的英文名称。

getSeconds()      获取日期对象“秒数”部分数值(0 ~59)。

getTime()    
 获取当前日期对象中的时间值。该时间值表示从1970年1月1日00:00:00开始,到当前日期对象时,所经过的毫秒数,以格林威治时间为准。

getTimezoneOffset()    
 获取世界标准时间(UTC)与当前主机时间(本地时间)之间的分钟差值。

getUTCDate()    
使用世界标准时间获取当前日期对象返回一个月中的某一天(1 ~ 31)。

getUTCDay()    
 使用世界标准时间获取当前日期对象返回表示星期的一天的一个数字。(0 ~ 6)。

getUTCFullYear()    
 使用世界标准时间获取当前日期对象“年份”部分四位数值。

getUTCHours()      使用世界标准时间获取当前日期对象“小时”部分数值(0
~ 23)

getUTCMilliseconds()      使用世界标准时间获取当前日期对象的毫秒数(0
~ 999)。

getUTCMinutes()    
 使用世界标准时间获取当前日期对象“分钟”部分数值(0 ~59)。

getUTCMonth()    
 使用世界标准时间获取当前日期对象“月份”部分的数值(1 ~ 12)。

getUTCSeconds()    
 使用世界标准时间获取当前日期对象“秒数”部分数值(0 ~59)。

Date.parse(datestring)    
 用于分析一个包含日期的字符串,并返回该日期与1970年1月1日00:00:00之间相差的毫秒数。参数:datestring为日期格式的字符串,格式为:yyyy/mm/dd
hh:mm:ss。

toDateString()     可把 Date
对象的日期部分转换为字符串,并返回结果。

toISOString()      以字符串值的形式返回采用 ISO
格式的日期,格式:YYYY-MM-DDTHH:mm:ss.sssZ。

toJSON()      获取当前日期对象的JSON格式的日期字串,格式:
YYYY-MM-DDTHH:mm:ss.sssZ。

toLocaleDateString()    
 以字符串的形式获取本地化当前日期对象。并且只包含“年月日”部分的短日期信息。

toLocaleTimeString()    
 以字符串的形式获取本地化当前日期对象。并且只包含“时分秒”部分的短日期信息。

toLocaleString()     根据本地时间把Date
对象转换为字符串,并返回结果。包含“年月日时分秒”。如:[[Now.toLocaleString()]];输出:2014年5月25日
下午12:33:26

toTimeString()     把 Date
对象的时间部分转换为字符串,并返回结果。如:[[Now.toTimeString()]];输出:13:21:58
GMT+0800 (CST)

toUTCString()     根据世界时间 (UTC) 把 Date
对象转换为字符串,并返回结果。如:[[Now.toUTCString()]];输出:Sun,25
May 2014 05:27:36 GMT

Date.UTC(year,month,day,hour,min,sec,millisec)      获取相对于1970
年 1 月 1 日 00:00:00的世界标准时间,与指定日期对象之间相差的毫秒数。
参数:组成指定日期对象的年、月、日、时、分、秒以及毫秒的数值。

valueOf()     获取当前日期对象的原始值。

addYears(years)    
 将指定的年份数加到当前日期对象上,获取一个新的日期对象。
参数:years为整数数值,正负均可。如:设置文本部件1的值为:[[Now.addYears(-3)]];输出:Wed
May 25 2011 13:44:52 GMT+0800
(CST)。设置文本部件1的值为:[[Now.addYears(3)]];输出:Thu May 25
2017 13:46:46 GMT+0800 (CST)。

addMonths(months)    
 将指定的月份数加到当前日期对象上,获取一个新的日期对象。
参数:months为整数数值,正负均可。

addDays(days)    
 将指定的天数加到当前日期对象上,获取一个新的日期对象。
参数:days为整数数值,正负均可。

addHours(hours)    
 将指定的小时数加到当前日期对象上,获取一个新的日期对象。
参数:hours为整数数值,正负均可。

addMinutes(minutes)    
 将指定的分钟数加到当前日期对象上,获取一个新的日期对象。
参数:minutes为整数数值,正负均可。

addSeconds(seconds)      
将指定的秒数加到当前日期对象上,获取一个新的日期对象。
参数:seconds为整数数值,正负均可。

addMilliseconds(ms)    
 将指定的毫秒数加到当前日期对象上,获取一个新的日期对象。
参数:ms为整数数值,正负均可。

        if ( X > 0 ) {alert(‘向右’);}

获取x的绝对值

另外,如何打乱图片本次先不做教程,下期再行补充。

字符串函数详解

length    
 获取当前文本对象的长度,即字符个数;1个汉字的长度按1计算。

charAt(index)      获取当前文本对象中指定位置的字符;
参数:index为大于等于0的整数,表示字符串中某个位置的数字

charCodeAt(index)    
 获取当前文本对象中指定位置字符的Unicode编码(中文编码段19968 ~
40622);字符起始位置从0开始。 参数:index为大于等于0的整数。

concat(‘string’)      将当前文本对象与另一个字符串组合。
参数:string为将被连接为一个字符串的一个或多个字符串对象。

indexOf(‘searchValue’,start)    
 从左至右获取查询字符串在当前文本对象中首次出现的位置。未查询到时返回值为-1。
参数:searchValue为查询的字符串;start为查询的起始位置。该参数可省略,官方未给出此参数,经测试可用。

lastIndexOf(‘searchvalue’,start)    
 从右至左获取查询字符串在当前文本对象中首次出现的位置。未查询到时返回值为-1。
参数:searchValue为查询的字符串;start为查询的起始位置。该参数可省略,官方未给出此参数,经测试可用。

replace(‘searchvalue’,’newvalue’)    
 用新的字符串替换当前文本对象中指定的字符串。
参数:searchvalue为被替换的字符串;newvalue为新文本对象或字符串。

slice(start,end)    
 从当前文本对象中截取从指定起始位置开始到终止位置之前的字符串。
参数:start为被截取部分的起始位置,该数值可为负数;end为被截取部分的终止位置,该数值可为负数。该参数可省略,省略该参数则由起始位置截取至文本对象结尾。start要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1
指字符串的最后一个字符,-2
指倒数第二个字符,以此类推。end紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括
start
到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

split(‘separator’,limit)    
 将当前文本对象中与分隔字符相同的字符转为“,”,形成多组字符串,并返回从左开始的指定组数。

        else if ( X < 0 ) {alert(‘向左’);}

  1. Math.pow(x,y)

新建动态面板,用于放置九宫格图片。

参数:separator为分隔字符,分隔字符可以为空,为空时将分隔每个字符为一组;limit为返回组数的数值,该参数可以省略,省略该参数则返回所有字符串组。如:LVAR1

axure7.0标准教程由金乌老师录制的黄金教程;[[LVAR1.split(”,5)]];返回:a,x,u,r,e;[[LVAR1.split(”)]],则返回:a,x,u,r,e,7,.,0,标,准,教,程,由,金,乌,老,师,录,制,的,黄,金,教,程

substr(start,length)    
 从当前文本对象中指定起始位置开始截取一定长度的字符串。
参数:start为被截取部分的起始位置;length为被截取部分的长度,该参数可省略,省略该参数则由起始位置截取至文本对象结尾。

substring(from,to)    
 从当前文本对象中截取从指定位置到另一指定位置区间的字符串。右侧位置不截取。
参数:from为指定区间的起始位置;to为指定区间的终止位置,该参数可省略,省略该参数则由起始位置截取至文本对象结尾。

toLowerCase()      将文本对象中所有的大写字母转换为小写字母。

toUpperCase()      将当前文本对象中所有的小写字母转换为大写字母。

trim()      删除字符串中开头和结尾多余的空格

toString()      将一个逻辑值转换为字符串。

        else if ( Y > 0) {alert(‘向下’);}

获取x的y次幂

接下来……算了,啰里啰嗦的描述,自己看着都累了,直接上截图

中继器函数详解

Repeater     中继器的对象。Item.Repeater即为Item所在的中继器对象。

visibleItemCount      
中继器项目列表中可见项的数量。比如:项目列表共有15项,分页显示为每页6项。当项目列表在第1、2页时,可见项数量为6;当项目列表在第3页时,可见项数量为3。

itemCount      
获取中继器项目列表的总数量,或者叫加载项数量。默认情况下项目列表的总数量会与中继器数据集中的数据行数量一致,但是,如果进行了筛选,项目列表的总数量则是筛选后的数量,这个数量不受分页影响。

dataCount      获取中继器数据集中数据行的总数量。

pageCount      获取中继器分页的总数量,即能够获取分页后共有多少页。

pageIndex      获取中继器项目列表当前显示内容的页码。

Item      获取数据集一行数据的集合,即数据行的对象。中继器的项

TargetItem     目标数据行的对象。

Item.列名      获取数据行中指定列的值。

index      获取数据行的索引编号,编号起始为1,由上至下每行递增1。

isFirst    
 判断数据行是否为第1行;如果是第1行,返回值为“True”,否则为“False”。

isLast    
 判断数据行是否为最末行;如果是最末行,返回值为“True”,否则为“False”。

isEven    
 判断数据行是否为偶数行;如果是偶数行,返回值为“True”,否则为“False”。

isOdd    
 判断数据行是否为奇数行;如果是奇数行,返回值为“True”,否则为“False”。

isMarked    
 判断数据行是否为被标记;如果被标记,返回值为“True”,否则为“False”。

isVisible    
 判断数据行是否为可见行;如果是可见行,返回值为“True”,否则为“False”。

        else if ( Y < 0 ) { alert(‘向上’);}

接下来,来解决刚才提到的四个需求点

选择第一张图片

布尔运算符

==     等于

!=      不等于

<       小于

<=     小于等于

>       大于

>=     大于等于

&&     并且

||         或者

        else{alert(‘没滑动’); }

本文先把四个需求的拖动事件和拖动结束事件拆分开,最后会把四个需求的事件写在一起。

鼠标单击时,IF

    });

(设计原型屏幕尺寸为375*812)

太阳娱乐 10

 

  1. 到边界时的拖动阻尼&回弹效果

设置文本:

然而在实际的操作中,手指的上下滑动很难做到直上直下,只要稍微有点斜,只要稍微有点斜,就会被X轴的判断先行接管,而与我们实际的操作意愿相背离。此时就需要添加特殊的判断技巧,修改代码如下

拖动阻尼效果其实就是随着水平拖动距离(x轴)的增加,Banner的移动距离(Y轴)增量减少。见下图:

太阳娱乐 11

    var mybody = document.getElementsByTagName(‘body’)[0];

太阳娱乐 12

其中,lx为元件X的元件文字,ly为元件Y的元件文字。设置文本,

   

这个函数关系可以用函数实现。尝试了几个函数,发现函数y=4*x^(0.5)图像基本满足要求。

太阳娱乐 13

    //滑动处理

太阳娱乐 14

移动:

    var startX, startY, moveEndX, moveEndY, X, Y;   

再加上条件限制就OK了:

太阳娱乐 15

    mybody.addEventListener(‘touchstart’, function(e) {

左侧的阻尼效果:

其中,lx为元件X*100的元件文字,ly为元件Y*100的元件文字。🔹为八个图块设置同样的交互即可,X、Y、X*100、Y*100的初始值就是初始空白图块的值,应此=,(X*100,Y*100)=

        e.preventDefault();

  • 【条件】当Banner模块的X坐标>20时(Banner模块距离屏幕左侧边距为20,以下同)
  • 【动作】拖动时==>>移动Banner模块到达位置:X坐标[[4*Math.pow(TotalDragX,0.5)+20]],Y坐标[[this.y]]

OVER,拼图已经做完。

        startX = e.touches[0].pageX;

右侧的阻尼效果:

拼图游戏看似已经做完了,其实呢,美中不足,差一步:当我们拼完图后,想打乱重新来一次,有木有,无法打乱,那么怎么办呢,本期先留下一点小悬念,我们下期再出如何打乱图片的RP。

        startY = e.touches[0].pageY;

在右侧的时候,阻尼的效果在Banner模块往左拖动时出现,所以其TotalDragX的值会是负数,需要加上绝对值函数。

原型文件下载链接:

    }, false);

  • 【条件】当Banner模块的X坐标<-670
  • 【动作】拖动时==>>移动Banner模块到达位置:X坐标[[4*Math.pow(Math.abs(TotalDragX),0.5)-670]],Y坐标[[this.y]]

    mybody.addEventListener(‘touchmove’, function(e) {

回弹效果可与自动归位效果函数写在一起,请往下看。

提取码:v7c7

        e.preventDefault();

  1. 停止拖动时若为非正常位置,则自动归位

Good Bye!!!

        moveEndX = e.changedTouches[0].pageX;

太阳娱乐 16

太阳娱乐 17关注作者公众号,一起向梦想出发

        moveEndY = e.changedTouches[0].pageY;

拖动结束时,通过判断Banner模块的X坐标来定义归位的Banner位。

        X = moveEndX – startX;

归位Banner1的情况:

        Y = moveEndY – startY;

  • 【条件】当Banner模块的X坐标小于-160
  • 【动作】拖动结束时==>>移动Banner模块到Banner1的正常位,X坐标为20,Y坐标为[[this.y]],动画线性,时间400ms

        

归位Banner2的情况:

        if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {

  • 【条件】当Banner模块的X坐标≥-500且≤-160
  • 【动作】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms

            alert(“向右”);

归位Banner3的情况:

        }

  • 【条件】当Banner模块的X坐标大于-500
  • 【动作】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-670,Y坐标为[[this.y]],动画线性,时间400ms

        else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {

  1. 快速拖动时,自动切换到下一个Banner

            alert(“向左”);

当拖动的距离未达到自动归位的条件时,可通过拖动的速度来判断是否移动至下一个Banner位。

        }

可通过鼠标拖动的距离和拖动的时间来判断。此时需要加入全局变量来记录当前Banner模块的位置数(后面会用到)。

        else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {

添加全局变量,如名称设为“BannerState”,默认值为1。定义值1=Banner位为1,值2=Banner位为2,值3=Banner位为3。

            alert(“向下”);

在上文自动归位的【动作】中,再加入变量设置,结果如下:

        }

归位Banner1的情况:

        else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {

  • 【条件】当Banner模块的X坐标<-160
  • 【动作1】拖动结束时==>>移动Banner模块到Banner1的正常位,X坐标为20,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为1。

            alert(“向上”);

归位Banner2的情况:

        }

  • 【条件】当Banner模块的X坐标≥-500且≤-160
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

        else{

归位Banner3的情况:

            alert(“没滑动”);

  • 【条件】当Banner模块的X坐标>-500
  • 【动作1】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-670,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为3。

        }

有了全局变量记录Banner模块的位数,就可以通过拖动的方向(TotalDragX的正负)和拖动的时间(DragTime),来判断需要移动的下一个Banner位数。本文快速拖动定义为400ms内拖动距离为50。

    });

快速拖动自动至Banner1的情况(由Banner2至Banner1):

 

  • 【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX>0(移动的方向判断)
  • and【条件4】变量BannerState=2(当前Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner1的正常位,X坐标为20,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为1。

以上代码,在测试时仍不能达到预期的效果,因为还有一个问题——body的元素的高仔细查查,发现其值是0
故还应该在此基础上添加以下代码

快速拖动自动至Banner2的情况(由Banner1至Banner2):

    var mybody = document.getElementsByTagName(‘body’)[0];

  • 【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX<0(移动的方向判断)
  • and【条件4】变量BannerState=1(当前Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

    var h = document.documentElement.clientHeight;

快速拖动自动至Banner2的情况(由Banner3至Banner2):

        mybody.style.height = h + ‘px’;

  • 【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX>0(移动的方向判断)
  • and【条件4】变量BannerState=3(当前Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

到此,已实现了手机移动端手指的上滑、下滑、左滑和右滑操作。

快速拖动自动至Banner3的情况(由Banner2至Banner3):

 

  • 【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX<0(移动的方向判断)
  • and【条件4】变量BannerState=2(当前Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为3。

方法二

  1. 左右拖动时,限制页面上下拖动;上下拖动时,限制Banner左右拖动

1、滑动屏幕事件使用HTML5中的touchstart滑动开始事件和touchmove滑动结束事件。

此需求可以通过判断拖动时的沿X轴与Y轴的距离大小来判断。

2、方向的判断:以起点做平面坐标系,与终点连线做直线,直线与x正半轴计算角度;我们以45度角为方向分割线,如:只要滑动角度大于等于45度且小于135度,则判断它方向为向上滑。如图所示:

若Math.abs(TotalDragX)>Math.abs(TotalDragY),即瞬时水平移动>垂直移动,则限制页面垂直方向的拖动。

3、使用Math.atan2来计算起点与终点形成的直线角度。

若Math.abs(TotalDragX)<math.abs(TotalDragY),即瞬时水平移动<垂直移动,则限制Banner模块的水平拖动。

 

同时还需要利用变量来记录判断的结果,其相当于一个开关的作用,需加入到上文的【条件】和【动作】中。

注意:标准坐标系与屏幕坐标系并不相同,在屏幕坐标系中,上半轴为负值,要实现转换,只需要调换Y坐标起点与终于位置即可。

添加变量,如名称为“Movable”,默认值为0。定义值0=限制水平拖动,1=限制垂直拖动。

 

在拖动时,进行TotalDragX和TotalDragY的对比判断,并且置于最前。

代码如下:

  • 【条件】Math.abs(TotalDragX)>Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为1
  • 【条件】Math.abs(TotalDragX)<Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为0

      var h = document.documentElement.clientHeight,

至此,Banner模块的拖动事件以及拖动结束时间基本就可以写全了。合并后如下:

          mybody = document.getElementsByTagName(‘body’)[0];

Banner模块拖动时事件(case1~case6)

          mybody.style.height = h + ‘px’;

#先置判断#

 

case1

 

  • if【条件】Math.abs(TotalDragX)>Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为1

        //返回角度

case2

        function GetSlideAngle(dx,dy) {

  • if【条件】Math.abs(TotalDragX)<Math.abs(TotalDragY)
  • 【动作】拖动时==>>设置变量“Movable”值为0

          return Math.atan2(dy,dx) * 180 / Math.PI;

#垂直拖动#

        }

  • case3
  • if【条件】变量Movable值=0
  • 【动作】拖动时==>>移动:垂直拖动

 

#水平拖动#

        //根据起点和终点返回方向
1:向上,2:向下,3:向左,4:向右,0:未滑动

case4(左侧阻尼)

        function GetSlideDirection(startX,startY, endX, endY) {

  • if【条件1】当Banner模块的X坐标>20时
  • 【条件2】变量Movable值=1
  • 【动作】拖动时==>>移动Banner模块到达位置:X坐标[[4*Math.pow(TotalDragX,0.5)+20]],Y坐标[[this.y]]

          var dy = startY – endY;

case5(右侧阻尼)

          var dx = endX – startX;

  • if【条件1】当Banner模块的X坐标<-670
  • 【条件2】变量Movable值=1
  • 【动作】拖动时==>>移动Banner模块到达位置:X坐标[[4*Math.pow(Math.abs(TotalDragX),0.5)-670]],Y坐标[[this.y]]

          var result = 0;

case6(无阻尼水平拖动)

 

  • if【条件】变量Movable值=1
  • 【动作】拖动时==>>移动:水平拖动

          //如果滑动距离太短

Banner模块拖动结束时事件(case1~case8)

          if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {

case1

             return result;

  • if【条件】无
  • 【动作】设置变量Movable值=0

          }

#自动归位#

          var angle = GetSlideAngle(dx, dy);

case2(归位Banner1的情况)

          if (angle >= -45 && angle < 45) {

  • if【条件】当Banner模块的X坐标<-160
  • 【动作1】拖动结束时==>>移动Banner模块到Banner1的正常位,X坐标为20,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为1。

             result = 4;

case3(归位Banner2的情况)

          }else if (angle >= 45 && angle < 135) {

  • else if【条件】当Banner模块的X坐标≥-500且≤-160
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

             result = 1;

case4(归位Banner3的情况)

          }else if (angle >= -135 && angle < -45) {

  • else if【条件】当Banner模块的X坐标>-500
  • 【动作1】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-670,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为3。

             result = 2;

#快速拖动切换#

          }else if ((angle >= 135 && angle <= 180) || (angle >=
-180 && angle < -135)) {

case5(由Banner2至Banner1)

             result = 3;

  • else if【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX>0(移动的方向判断)
  • and【条件4】变量BannerState=2(移动至的Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner1的正常位,X坐标为20,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为1。

          }

case6(由Banner1至Banner2)

          return result;

  • else if【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX<0(移动的方向判断)
  • and【条件4】变量BannerState=1(移动至的Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

        }

case7(由Banner3至Banner2)

 

  • else if【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX>0(移动的方向判断)
  • and【条件4】变量BannerState=3(移动至的Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner2的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为2。

 

case8(快速拖动自动至Banner3的情况,由Banner2至Banner3)

        //滑动处理

  • else if【条件1】Math.abs(TotalDragX)≥50(移动的距离判断)
  • and【条件2】DragTime≤400ms(移动的时间判断)
  • and【条件3】TotalDragX<0(移动的方向判断)
  • and【条件4】变量BannerState=2(移动至的Banner位数的判断)
  • 【动作1】拖动结束时==>>移动Banner模块到Banner3的正常位,X坐标为-325,Y坐标为[[this.y]],动画线性,时间400ms
  • 【动作2】拖动结束时==>设置变量“BannerState”值为3。

        var startX, startY;

以上为所需的全部拖动时事件和拖动结束时事件。

        mybody.addEventListener(‘touchstart’, function (ev){

最后说一下如何用Axure发布链接,添加在手机主屏上。

          ev.preventDefault();

  1. 按F6发布,配置如下,点击确定发布,得到发布的链接。

          startX = ev.touches[0].pageX;

太阳娱乐 18

          startY = ev.touches[0].pageY; 

太阳娱乐 19

        }, false);

  1. 用手机自带的浏览器打开链接,添加到home主屏上。

 

太阳娱乐 20

        mybody.addEventListener(‘touchmove’, function (ev){

本文没有贴源文件的用例截图,而是将思考的步骤拆分出来一步步地得到所需的结果(希望大家能看明白,作者注),欢迎一起交流学习,有什么问题建议可以留言。后期有时间再做更多的效果出来分享给大家!

          var endX, endY;

原型下载链接:(上传的原型文件不是完全与这次分享一致,作者后续又加了点特效,Duang!而且作者画图喜欢用动态面板封装母版,层级较多)

          ev.preventDefault();

链接: 密码:y6nw

          endX = ev.changedTouches[0].pageX;

预览链接:(建议用手机自带浏览器打开,添加到主页上再预览)

          endY = ev.changedTouches[0].pageY;

 

本次分享到此结束,感谢各位同学观看!

        var direction = GetSlideDirection(startX, startY, endX, endY);

本文由 @Cheese 原创发布于人人都是产品经理。未经许可,禁止转载

        switch (direction){

题图来自 Unsplash ,基于 CC0 协议返回搜狐,查看更多

          case 0:

责任编辑:

            alert(“没滑动”);

            break;

          case 1:

            alert(“向上”);

            break;

          case 2:

            alert(“向下”);

            break;

          case 3:

            alert(“向左”);

            break;

          case 4:

            alert(“向右”);

            break;

          default:          

        } 

      }, false);

 

PS:用touchmove事件获取终点坐标,而不是用touchend事件,是因为当你只是点击屏幕的时候,就会触发touchEnd事件,但是不会触发touchMove事件。这样会造成touchEnd中取得的endX,从而造成endY值不准确。比如先滑动再点击,可能同样会触发滑动事件

admin

网站地图xml地图