jQuery手机向左滑动删除代码

jQuery手机向左滑动删除代码-精品资源网
jQuery手机向左滑动删除代码
此内容为免费资源,请登录后查看
0
免费资源

jQuery手机向左滑动删除代码

这是一款基于jquery.mobile实现的仿苹果手机短信删除功能网页特效,简单的jQuery手机向左滑动删除代码。

js代码

<script type=\"text/javascript\" src=\"js/jquery.mobile-1.4.3.min.js\"></script>
<script type=\"text/javascript\">
$(function() {

    function prevent_default(e) {
        e.preventDefault();
    }

    function disable_scroll() {
        $(document).on(\'touchmove\', prevent_default);
    }

    function enable_scroll() {
        $(document).unbind(\'touchmove\', prevent_default)
    }

    var x;
    $(\'.swipe-delete li > a\')
        .on(\'touchstart\', function(e) {
            console.log(e.originalEvent.pageX)
            $(\'.swipe-delete li > a\').css(\'left\', \'0px\') // close em all
            $(e.currentTarget).addClass(\'open\')
            x = e.originalEvent.targetTouches[0].pageX // anchor point
        })
        .on(\'touchmove\', function(e) {
            var change = e.originalEvent.targetTouches[0].pageX - x
            change = Math.min(Math.max(-100, change), 0) // restrict to -100px left, 0px right
            e.currentTarget.style.left = change + \'px\'
            if (change < -10) disable_scroll() // disable scroll once we hit 10px horizontal slide
        })
        .on(\'touchend\', function(e) {
            var left = parseInt(e.currentTarget.style.left)
            var new_left;
            if (left < -35) {
                new_left = \'-100px\'
            } else if (left > 35) {
                new_left = \'100px\'
            } else {
                new_left = \'0px\'
            }
            // e.currentTarget.style.left = new_left
            $(e.currentTarget).animate({left: new_left}, 200)
            enable_scroll()
        });

    $(\'li .delete-btn\').on(\'touchend\', function(e) {
        e.preventDefault()
        $(this).parents(\'li\').slideUp(\'fast\', function() {
            $(this).remove()
        })
    })

});
</script>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容