手机端滑动删除效果

代码语言: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(&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0