手机端滑动删除效果-html代码-BFW代码库

手机端滑动删除效果

代码语言：html

代码描述：手机端滑动删除效果，采用hammer.js和jquery实现

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
    <script type="text/javascript">;
        (function (win, doc) {

            $.fn.slide2del = function (options) {

                var opt = $.extend(true, {
                    offset: 0,
                    sItemClass: "session-box",
                    sDelBtnClass: "del-btn"
                }, options);

                if (opt.sItemClass.indexOf(".") >= 0) {
                    opt.sItemClass = opt.sItemClass.substring(1);
                }
                if (opt.sDelBtnClass.indexOf(".") >= 0) {
                    opt.sDelBtnClass = opt.sDelBtnClass.substring(1);
                }

                opt.offset = $('.'+opt.sDelBtnClass).width();

                return $(this).each(function () {

                    var offset = opt.offset;
                    //鍒涘缓涓€涓柊鐨刪ammer瀵硅薄骞朵笖鍦ㄥ垵濮嬪寲鏃舵寚瀹氳澶勭悊鐨刣om鍏冪礌
                    var _this = $(this).get(0);

                    $(this).on('touchend', function (e) {


                        var target = $(e.target);

                        if (!target.hasClass(opt.sItemClass)) {

                            target = target.parents('.'+opt.sItemClass);

                        }

                        var isShow = $(this).attr("isShow");


                        if (isShow != "true") {

                            console.log("榧犳爣鎶捣:", isShow, target);
                            target.animate({
                                left: 0
                            }, 300);
                        }

                    }).on('click',
                        function () {


                            var isShow = $(this).attr("isShow");
                            if (isShow != "true") {
                                return false;
                            }
                            if (opt.itemClickHandler) {
                                var result = opt.itemClickHandler.call(this, $(this));

                                if (result != false) {
                                    $(this).slide2del_hideDel();
                                }

                            } else {
                                $(this).slide2del_hideDel();
                            }

                        }).on('click',
                        '.'+opt.sDelBtnClass,
                        function (e) {
                            var target = $(e.target);

                            if (!target.hasClass(opt.sItemClass)) {

                                target = target.parents('.'+opt.sItemClass);

                            }

                            opt.delHandler && opt.delHandler(target, $(this));

                            target.css({
                                left: 0,
                                'transition': 'left 300ms',
                                '-webkit-transition': 'left 300ms'
                            }).attr("isShow", false);
                        });

                    $(this).__proto__.slide2del_hideDel = function () {

                        $(this).css({
                            left: 0,
                            'transition': 'left 300ms',
                            '-webkit-transition': 'left 300ms'
                        }).attr("isShow",
                            false);

                    };



                    var hammertime = new Hammer(_this);

                    var lastAngle = null;
                    //娣诲姞浜嬩欢
                    hammertime.on("pan",
                        function (e) {

                            var dx = e.deltaX;


                            /*if(lastAngle!=null){
                    if(Math.abs(180 - Math.abs(e.angle))>45){
                        return false;
                    }
                }*/

                            lastAngle = e.angle;

                            var target = $(e.target);

                            if (!target.hasClass(opt.sItemClass)) {

                                target = target.parents('.'+opt.sItemClass);

                            }

                            var isShow = target.attr("isShow");
                            var hiding = target.attr("hiding");
                            if (hiding) {
                                return false;
                            }

                            if (dx < 0 && isShow != "true") {

                                target.siblings('.'+opt.sItemClass).css({
                                    left: 0,
                                    'transition': 'left 300ms',
                                    '-webkit-transition': 'left 300ms'
                                }).attr('isShow', false).........完整代码请登录后点击上方下载按钮下载查看