手机触摸切换广告图片

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2012-11-15   阅读次数: 1383   查看权限: 游客查看

iphone或者andriod手机本地应用中常用的图片介绍滑动切换的效果:实现触屏滚动图片,可以手指拨动,看看能否有简洁的代码,尽量不要使用js库。

开始使用zeptojs库,一个轻量级非常类似jquery的移动终端库。结合swipeLeft左划事件,swipeRight右划事件,及animate动画函数很快就完成。但是很快发现事件并不是那么灵活,最后死活不起作用。fuck,还得我原始代码解决。并写成函数,集合了常用的几种划屏事件。

function touches(obj,direction,fun){
        //obj:ID对象
        //direction:swipeleft,swiperight,swipetop,swipedown,singleTap,touchstart,touchmove,touchend
        //          划左,    划右,     划上,   划下,    点击,    开始触摸, 触摸移动, 触摸结束
        //fun:回调函数
        var defaults = {x: 5,y: 5,ox:0,oy:0,nx:0,ny:0};
        direction=direction.toLowerCase();
        //配置:划的范围在5X5像素内当点击处理
        obj.addEventListener("touchstart",function() {
            defaults.ox = event.targetTouches[0].pageX;
            defaults.oy = event.targetTouches[0].pageY;
            defaults.nx = defaults.ox;
            defaults.ny = defaults.oy;
            if(direction.indexOf("touchstart")!=-1)fun();
        }, false);
        obj.addEventListener("touchmove",function() {
            event.preventDefault();
            defaults.nx = event.targetTouches[0].pageX;
            defaults.ny = event.targetTouches[0].pageY;
            if(direction.indexOf("touchmove")!=-1)fun();
        }, false);
        obj.addEventListener("touchend",function() {
            var changeY = defaults.oy - defaults.ny;
            var changeX = defaults.ox - defaults.nx;
            if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>defaults.y){
                //左右事件
                if(changeX > 0) {
                    if(direction.indexOf("swipeleft")!=-1)fun();
                }else{
                    if(direction.indexOf("swiperight")!=-1)fun();
                }
            }else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>defaults.x){
                //上下事件
                if(changeY > 0) {
                    if(direction.indexOf("swipetop")!=-1)fun();
                }else{
                    if(direction.indexOf("swipedown")!=-1)fun();
                }
            }else{
                //点击事件
                if(direction.indexOf("singleTap")!=-1)fun();
            }
            if(direction.indexOf("touchend")!=-1)fun();
        }, false);
    }

完整代码访问这里,请使用支持html5浏览器。如果想要划屏切换图片,请使用智能机或者平板打开:http://down.scscms.com/scs/pic/move.html

==============================================分割线======================================

以上是移动整个div,所以不能循环滚动,下面改写成移动的是对应图片,可以无限的向左或者向右滚动。请使用智能机或者平板打开:http://down.scscms.com/scs/pic/move2.html

关键词: 手机,触摸切换,触摸事件   编辑时间: 2012-11-21

  • 感到高兴

    1

    高兴
  • 感到支持

    3

    支持
  • 感到搞笑

    1

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    1

    愤怒
100%(8)
0%(0)
共有2 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 【游客】对哦!楼上说得不错。 [2014-5-26 18:04:36]
  • 【游客】崇拜!要是还能加个自动切换到下一张图片的效果就完美了! [2014-5-26 17:41:45]
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程