手机触摸切换广告图片

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

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

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

function touchEvent(obj, direction, fun) {
    //obj:dom对象
    //direction:swipeleft,swiperight,swipetop,swipedown,singleTap,longTap,dblTap,touchstart,touchmove,touchend
    //fun:回调函数
    var def = {x: 10, y: 10, ox: 0, oy: 0, nx: 0, ny: 0, t: 0,speed:400,dbl:!1,T:null}
    //配置:划的范围在5X5像素内当点击处理。speed是双击时间间隔
    function handle(t){
        direction.includes(t) && fun.call(obj,t)
    }
    obj.addEventListener('touchstart', function (e) {
        def.ox = e.targetTouches[0].pageX
        def.oy = e.targetTouches[0].pageY
        def.nx = def.ox
        def.ny = def.oy
        def.t = Date.now()
        handle('touchstart')
    }, false)
    obj.addEventListener('touchmove', function (e) {
        e.preventDefault()
        def.nx = e.targetTouches[0].pageX
        def.ny = e.targetTouches[0].pageY
        handle('touchmove')
    }, false)
    obj.addEventListener('touchend', function () {
        var mX = def.ox - def.nx
        var mY = def.oy - def.ny
        var absX = Math.abs(mX)
        var absY = Math.abs(mY)
        if(absX >= absY && absX > def.x){
            handle(mX > 0?'swipeleft':'swiperight')
        }else if(absX < absY && absY > def.y){
            handle(mY > 0?'swipetop':'swipedown')
        }else{
            if(def.dbl){
                //双击
                clearTimeout(def.T)
                def.dbl = !1
                handle('dblTap')
            }else{
                def.dbl = !0
                def.T = setTimeout(function(){
                    handle(Date.now() - def.t > 500?'longTap':'singleTap')
                    def.dbl = !1
                },def.speed)
            }
        }
        handle('touchend')
    }, false)
}

//使用例子
touchEvent(document.getElementById('view'), ['swipeleft','swiperight','swipetop','swipedown','singleTap','longTap','dblTap'], function (t) {
    console.log(t)
})

*函数修改于:2018-7-13*

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

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

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

关键词: 手机,触摸切换,触摸事件   编辑时间: 2018-07-13 15:35:51

  • 感到高兴

    1

    高兴
  • 感到支持

    3

    支持
  • 感到搞笑

    1

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    1

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

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 【游客】对哦!楼上说得不错。 [2014-05-26 18:04:36]
  • 【游客】崇拜!要是还能加个自动切换到下一张图片的效果就完美了! [2014-05-26 17:41:45]
关闭模块文章图片 article Pictrue
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 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简介