`

touchwipe 手机触屏

阅读更多
<script>jq1.9min.js</script>
<script>
(function(a){
    a.fn.touchwipe=function(c){
        var b={
            drag:false,
            min_move_x:20,
            min_move_y:20,
            wipeLeft:function(){/*向左滑动*/},
            wipeRight:function(){/*向右滑动*/},
            wipeUp:function(){/*向上滑动*/},
            wipeDown:function(){/*向下滑动*/},
            wipe:function(){/*点击*/},
            wipehold:function(){/*触摸保持*/},
            wipeDrag:function(x,y){/*拖动*/},
            preventDefaultEvents:true
        };
        if(c){a.extend(b,c)};
        this.each(function(){
            var h,g,j=false,i=false,e;
            var supportTouch = "ontouchstart" in document.documentElement;
            var moveEvent = supportTouch ? "touchmove" : "mousemove",
            startEvent = supportTouch ? "touchstart" : "mousedown",
            endEvent = supportTouch ? "touchend" : "mouseup"
             
             
            /* 移除 touchmove 监听 */
            function m(){
                this.removeEventListener(moveEvent,d);
                h=null;
                j=false;
                clearTimeout(e)
            };
             
            /* 事件处理方法 */
            function d(q){
                if(b.preventDefaultEvents){
                    q.preventDefault()
                };
                if(j){
                    var n = supportTouch ? q.touches[0].pageX : q.pageX;
                    var r = supportTouch ? q.touches[0].pageY : q.pageY;
                    var p = h-n;
                    var o = g-r;
                    if(b.drag){
                        h = n;
                        g = r;
                        clearTimeout(e);
                        b.wipeDrag(p,o);
                    }
                    else{
                        if(Math.abs(p)>=b.min_move_x){
                            m();
                            if(p>0){b.wipeLeft()}
                            else{b.wipeRight()}
                        }
                        else{
                            if(Math.abs(o)>=b.min_move_y){
                                m();
                                if(o>0){b.wipeUp()}
                                else{b.wipeDown()}
                            }
                        }
                    }
                }
            };
             
            /*wipe 处理方法*/
            function k(){clearTimeout(e);if(!i&&j){b.wipe()};i=false;j=false;};
            /*wipehold 处理方法*/
            function l(){i=true;b.wipehold()};
             
            function f(n){
                //if(n.touches.length==1){
                    h = supportTouch ? n.touches[0].pageX : n.pageX;
                    g = supportTouch ? n.touches[0].pageY : n.pageY;
                    j=true;
                    this.addEventListener(moveEvent,d,false);
                    e=setTimeout(l,750)
                //}
            };
             
            //if("ontouchstart"in document.documentElement){
                this.addEventListener(startEvent,f,false);
                this.addEventListener(endEvent,k,false)
            //}
        });
        return this
    };
})(jQuery);
 
/*
     调用
*/
$("#aa").touchwipe({
            wipeLeft:function(){ alert("向左滑动了")},
            wipeRight:function(){alert("向右滑动了")},
})
</script>
<div id="aa">
    abcde 
</div>

 

分享到:
评论

相关推荐

    touchwipe.js

    demotouch

    12款经典的白富美型—jquery图片轮播插件—前端开发必备

    4. Elastislide:这款插件专注于响应式设计,拥有四种独特的过渡效果,集成了Touchwipe插件以支持触屏设备。Elastislide支持水平和垂直图片传送带,并能固定在屏幕底部显示,同时提供缩略图形式的预览。 5. ...

    oureffect:一些常用的javascript效果和工具类

    加入了一些动画效果|—— effect1-js 图片分割效果|—— imageSwitcher 使用原生javascript写的js图片切换效果|—— library| |—— jquery.mousewheel.js 基于jquery的绑定鼠标滚轮时间的插件| |—— touchwipe.js ...

    jQuery焦点图效果

    5. 兼容性和优化:确保代码在不同浏览器上都能正常工作,同时考虑移动设备的触摸事件。可以使用jQuery的`.touchwipe()`插件来支持滑动切换。 6. 调整参数:根据实际需求,可以调整轮播速度、动画时间、是否循环播放...

    Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    在移动设备上,这种交互通常通过触摸滑动来实现,给用户提供无缝的浏览体验。在本文中,我们将探讨如何将Bootstrap的Carousel与dropload.js结合,以便在移动端实现滑动切换图片。 首先,Bootstrap Carousel的基本...

Global site tag (gtag.js) - Google Analytics