找回密码
 注册

QQ登录

只需一步,快速开始

查看: 11699|回复: 15

js滑动幻灯片支持触摸屏的效果怎么做?

  [复制链接]
发表于 2011-11-22 10:56:40 | 显示全部楼层 |阅读模式
js滑动幻灯片支持触摸屏的效果怎么做?
自己扣了个新浪的 但代码不够精简。
想求个完整的制作教程 和例子。。
发表于 2011-12-27 23:28:12 | 显示全部楼层
有一个Touch 事件,在浏览器上是捕获不到的,可以用模拟器或手机来测试。

具体分为:Touchstart、touchmove、touchend
  1. <script type="text/javascript">
  2. // define global variable
  3. var canvas = document.getElementById("canvas"),spirit, startX, startY;
  4.     // touch start listener
  5.   
  6. function touchStart(event) {
  7.          event.preventDefault();
  8.          if (spirit ||! event.touches.length) return;
  9.          var touch = event.touches[0];
  10.          startX = touch.pageX;
  11.          startY = touch.pageY;
  12.          spirit = document.createElement("div");
  13.          spirit.className = "spirit";
  14.          spirit.style.left = startX;
  15.          spirit.style.top = startY;
  16.          canvas.appendChild(spirit);
  17. }
  18.   
  19. // add touch start listener
  20. canvas.addEventListener("touchstart", touchStart, false);

  21. function touchMove(event) {
  22. event.preventDefault();
  23.          if (!spirit || !event.touches.length) return;
  24.          var touch = event.touches[0],
  25.               x = touch.pageX-startX,
  26.               y = touch.pageY-startY;
  27.          spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';   
  28. }
  29.   
  30. canvas.addEventListener("touchmove", touchMove, false);

  31. function touchEnd(event) {
  32.          if(!spirit) return;
  33.          canvas.removeChild(spirit);
  34.          spirit = null;
  35. }
  36.   
  37. canvas.addEventListener("touchend", touchEnd, false);
  38. </script>
  39. </html>
复制代码
回复 支持 1 反对 0

使用道具 举报

发表于 2011-12-9 17:56:06 | 显示全部楼层
求代码,哈哈
回复 支持 1 反对 0

使用道具 举报

发表于 2011-12-7 12:20:49 | 显示全部楼层
同求地址。。。。
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2011-11-30 10:38:51 | 显示全部楼层
simon4545 发表于 2011-11-25 17:00
完整的例子可以抠淘宝的,有个js是基于jquery,比较简单易懂。
原理就是监视触屏事件,然后计算定位,和之 ...

求地址
回复 支持 1 反对 0

使用道具 举报

发表于 2011-11-25 17:00:56 | 显示全部楼层
完整的例子可以抠淘宝的,有个js是基于jquery,比较简单易懂。
原理就是监视触屏事件,然后计算定位,和之前的没有什么大的区别
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2011-11-24 15:11:19 | 显示全部楼层
木有人知道啊 顶顶顶
回复 支持 0 反对 1

使用道具 举报

发表于 2012-1-4 01:31:47 | 显示全部楼层
先收了再研究
回复 支持 反对

使用道具 举报

发表于 2012-1-16 16:06:17 | 显示全部楼层
好好研究
回复 支持 反对

使用道具 举报

发表于 2012-2-15 15:22:49 | 显示全部楼层
跟在网页上是一样的``只是把鼠标的事件改成相应的确touchEvent事件就成了``
回复 支持 反对

使用道具 举报

发表于 2012-3-27 22:11:35 | 显示全部楼层
iscroll4
回复 支持 反对

使用道具 举报

发表于 2012-8-2 03:31:29 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2012-8-15 00:13:24 | 显示全部楼层
一般的鼠标事件不行么。?
回复 支持 反对

使用道具 举报

发表于 2012-11-27 10:50:28 | 显示全部楼层
先顶了再来研究
回复 支持 反对

使用道具 举报

发表于 2016-1-10 17:14:35 | 显示全部楼层
本帖最后由 xiaoyan2015 于 2016-1-10 17:15 编辑

关于手机端触摸屏效果,可以看看下面的这个例子,主要使用的是 HTML5+CSS3动画滚屏,jQuery触摸手机全屏上下滑动滚屏特效,JS+css3实现手机端滚屏效果,移动端制作满屏滚动效果!!!
page1.jpg
page2.jpg
page3.jpg
page4.jpg
或扫描二维码查看:
回复 支持 反对

使用道具 举报

发表于 2016-1-17 12:52:11 | 显示全部楼层
顶!学习了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-3-2 07:21 , Processed in 0.067060 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表