资讯频道 → Web前端
阅读更多

30顶
2踩

Web前端

原创新闻 jQuery 手势库

2008-12-23 12:09 by 资深编辑 ╱/罒呍唲 评论(9) 有10075人浏览
jQuery

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Adrien Friggeri 花费了一点时间改良了Music Player UI ，用jQuery创建了一个新的手势库，允许你在Web页面上添加这个小功能。



例如对图片的控制，这里有一个demo的页面，点击网页中的一个clicking here 的链接即可开始，按ESC键退出。按住鼠标的左/右键，向上移动图片就会隐藏，向下移动图片显示，左右就不说了。

以下是代码： 
// initialize the engine, inactive by default and set the trace color to red
$.gestures.init({active:false,color:'#ff0000'});

// adds a new gesture : Down
$.gestures.register('D', function() {
  alert('down !');
  });

// a more complex gesture : Down, Left, Up, Right
$.gestures.register('DLUR', function() {
  alert('this is a rectangle, no ?');
  });

// you can log unknown gestures :
$.gestures.error(function(gesture) {
  alert("oops, I don't understand what \""+gesture+"\" means");
});

// useful keyboard tricks :
$(window).keydown(function(e) {
  if ($.gestures.active() && e.which==27) {
    // disable capture when user presses ESC
    $.gestures.disable();
  } else if (!$.gestures.active() && e.which==17) {
    // enable capture when CTRL is pressed
    $.gestures.enable();
  }
});
$(window).keyup(function(e) {
  // disable capture when CTRL is not pressed
  if ($.gestures.active() && e.which==17) {
  $.gestures.disable();
  }
});

来自: ajaxian.com
30
顶
2
踩
评论 共 9 条 请登录后发表评论
9 楼 black.angel 2008-12-31 08:59
太超前了。。。。。。。
8 楼 howesen 2008-12-26 09:43
对IE不支持
7 楼 ayeah 2008-12-25 14:49
ie好像不支持svg
6 楼 heting1024 2008-12-24 09:43
bluexp29 写道

IE6直接出错！！！！！！！！！！！

确实
5 楼 lxxccc 2008-12-24 09:40
效果不错
对于图片网站来说应该是很不错的应用
期待完善   跨浏览器之类的等等
PS: 建议换到右键或者中键上   咱用FF   对于图片有专门的处理插件   比如拖动向左手动保存
      向右自动保存   向上新标签页打开等等  想用自定义的操作时不是很方便
4 楼 sunwei_07 2008-12-24 09:08
可以去火狐试试，但是感觉拖着累
普通用户又不懂，还不如几个按钮利落。也看的懂
3 楼 bluexp29 2008-12-24 09:03
IE6直接出错！！！！！！！！！！！
2 楼 hetylei 2008-12-24 09:01
cool
1 楼 全冠清 2008-12-23 15:35
相当不好用，反应奇慢，对IE7支持更是一塌糊涂。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 基于SVG的jquery手势密码解锁插件

    这是一款仿安卓的基于SVG的jquery手势密码解锁插件。你可以设置手势密码，以及验证手势密码，使用非常方便。

  • reveal:用于 jQuery 的基于手势的动作库

    揭示文档有关文档，请参阅 。

  • 支持移动设备触摸手势的jQuery图片裁剪插件

    jQuery-photoClip是一款支持移动设备触摸手势的jQuery图片裁剪插件。该图片裁剪插件在移动设备上可以使用手指来进行各种操作，如缩放、旋转等，同时在桌面设备中也提供了相应的方法来操作，是一款非常不错的图片裁剪...

  • 移动端手势库EasyTouch

    移动端手势库EasyTouch

  • [js/jquery]移动端手势拖动，放大，缩小预览图片

    摘要 有这样的需求需要在手机端预览图片的时候，实现图片的手势拖动，放大缩小功能。最终通过touch.js这个插件实现了效果。 touch.js Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda...Touch.js手势库...

  • jq向下滑动刷新_jQuery手势控制，下拉刷新

    loading-warp的margin-top值必须设置为其自身高度的相反值~ 引用 javascript 1 2 WAP端引入jquery与下拉插件即可，当然也可以引用zepto javascript 1 2 3 - PC端需要额外引入touche库文件添加触摸支持 [touche]...

  • jquery缩放手势插件_ZooMove：jQuery插件可在悬停时缩放图像

    它由jQuery驱动 ，因此无需太多代码即可快速启动并运行。 另请参阅： 如何创建纯CSS onClick图像缩放效果 ZooMove是完全免费的开源软件，可以在GitHub上供任何好奇的开发人员使用。 它...

  • 基于jQuery的轻量级touch事件库

    基于jQuery的轻量级touch事件库 demo: photo-slide 支持移动端和pc端 touchstart touchmove touchend

  • 移动端手势库

    GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件! http://gmu.baidu.com 5640239-1799532dc789171f.png 2：Hammer.js:http://hammerjs.github.io/ Hammer.js是一个开源的,轻量级的...

  • jQuery支持移动触摸设备的Lightbox插件

    Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持视频的播放。

  • 二方库 计算机术语英文翻译,移动端手势库hammerJS 2.0.4官方文档翻译

    hammerJS是一个优秀的、轻量级的触屏设备手势库，现在已经更新到2.04版本，跟1.0版本有点天壤地别了，毕竟改写了事件名并新增了许多方法，允许同时监听多个手势、自定义识别器，也可以识别滑动方向。不过对于新版本...

  • 11个很棒的 jQuery 图表库

    　CanvasJS jQuery是一个源自与CanvasJS的jQuery图表库。使用这个插件的时候，你可以利用所有CanvasJS的标准功能，以及一个扩展的功能集，包括动态更新，平移和缩放，事件和输出图像。图表表现相当好，对于大数据集...

  • 11个jQuery 图表库

    　作为JavaScript图表库的一部分，FusionCharts也提供了一个jQuery的插件，它组合了FusionCharts所有好的部分–智能设计、动画以及丰富的交互体验。图表无缝工作在所有类型的设备包括PC，Mac，Android设备以及iPad和...

  • 支持元素惯性拖放和多点触摸手势的js插件

    interact.js是一款支持元素惯性拖放和多点触摸手势的js插件。该插件支持在桌面设备和移动手机设备中拖放元素，拖动结束时带有惯性效果。并且支持移动设备的多点触摸手势。

  • 移动端手势库hammer.js

    GithubHammer.js是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件。使用引入hammer.js到文件中，并创建一个新的实例：var hammer = new Hammer(Element, Options); ...

  • imgViewer2：可扩展的响应式jQuery插件，可基于Leaflet映射库缩放和平移图像

    imgViewer2 可扩展的响应式jQuery插件可... 它是基于jQuery小部件工厂的易于扩展的响应式UI组件，该组件将映射库用于基础图像显示。 它应该可以在支持的所有浏览器台上运行。 该插件是原始插件的继承者。例子文献资料

  • 基于EasyX的贪吃蛇小游戏 - C语言

    基于EasyX的贪吃蛇小游戏 - C语言

  • Energy Core ECP5705-V01.pdf

    Energy Core ECP5705-V01.pdf

  • matlabGUI学生成绩管理系统pdf

    建立基于图形用户界面GUI的学生成绩管理系统，该系统能够实现学生成绩信息的增加、删除、查询(查询某门课所有学生的成绩并显示排名，查询某个学生的各科成绩并显示排名)、课程成绩统计最高分、最低分、平均分、方差、并显示相应的排名;绘制柱状图、条形图、饼状图、正太分布曲线等功能。 通过本实验使学生掌握图形用户界面GUI的操作和设计流程，并通过编写回调函数巩固前期的知识。

  • 高职教育品牌专业申报汇总表.doc

    高职教育品牌专业申报汇总表.doc

Global site tag (gtag.js) - Google Analytics