[オリジナル]zeptoがモバイルスワイプ画面プラグインを作成_html/css_WEB-ITnose

最近、プロジェクト内の jquery 2 を zepto に置き換えるのに忙しかったです

あまりにも多くの zepto パッケージを参照したくなかったので、少し時間を費やしました

zepto は非常に合理化されており、ソースコードは次のようになります本当に快適です

たまたまプロジェクトにスワイプ画面プラグインが必要だったので、zepto を使用してプラグインを作成しました

ロジックは実際には非常に単純ですが、テスト中に古いバージョンで touchmove が機能するとは予想していませんでしたAndroid デバイスのブラウザには多くのバグがありました

互換性を保つのに時間がかかりました

レンダリング

スタイル 1

スタイル 2

Call

通常はで生成された HTML コードバックグラウンドはありますが、タブページを操作するための一連のメソッドを書きました

簡単に呼び出すことができます 次のように:

<link rel="stylesheet" href="kslider.css" type="text/css"/><script type="text/javascript"  src="http://zeptojs.com/zepto.js"></script><script type="text/javascript"  src="zepto.kslider.js"></script><script type="text/javascript">    var k;    $(function () {            /*        参数：config        change:tab页变更事件            参数e: 当前页码        tick:自动滚动间隔时间毫秒 (不设置则不自动滚动)        maxWidth:容器最大宽度 (默认有100%)        minWidth:容器最小宽度 (默认有100%)        className:样式类名            "ks_wt_1" 标题栏-方形 (默认)            "ks_wt_2" 标题栏-小圆形            或者你自定义的类名        */        k = $("#divs1").slider({ change: function (e) { console.log(e); }, maxWidth: 360, minWidth: 300 });        //js添加一页并且跳转到第4页        k.add("标题", "内容").tab(3);        //删除页        //k.remove(0);        //小圆形按钮标题  每隔3秒自动滚动 myimg：自己写的css类，控制里面图片大小        $("#divs2").slider({ maxWidth: 300, className: "ks_wt_2 myimg", tick: 3000 });    });</script>

html

<div id="divs1" class="kslider">    <ul class="ks_wt">    <li class="ks_t2">标题1</li>    <li>标题2</li>    <li>标题3</li>    </ul>    <div class="ks_dbox ks_ts">        <div class="ks_warp">            <ul>                <li>text1</li>                <li>text1</li>                <li>text1</li>                <li>text1</li>                <li>text1</li>                <li>text1</li>                <li>text1</li>                <li>text1</li>            </ul>        </div>        <div class="ks_warp">            <img  src="/static/imghwm/default1.png"  data-src="img/img1.jpg"  class="lazy" / alt="[オリジナル]zeptoがモバイルスワイプ画面プラグインを作成_html/css_WEB-ITnose" >        </div>        <div class="ks_warp">            <ul>                <li>text3</li>                <li>text3</li>                <li>text3</li>                <li>text3</li>                <li>text3</li>                <li>text3</li>            </ul>        </div>    </div></div>

特定のコード

css

/*    kslider.css    lxk 2014.08.14    www.cnblogs.com/wingkun*/body{margin:0px;text-align:center;font:12px 微软雅黑;}.kslider{width:100%;overflow:hidden;margin:0 auto;background:#f0f0f0;}.kslider .ks_warp{width:100%;}.kslider .ks_ts{-webkit-transition:500ms;}.kslider .ks_dbox{width:100%;display:-webkit-box;text-align:left;}.kslider .ks_wt{display:-webkit-box;margin:0px;padding:0px;-webkit-box-pack:center;}.kslider .ks_wt li{text-align:center;list-style:none;background: -webkit-linear-gradient(top, #AAAAAA 0%,#979797 100%);color: #fff;}.ks_wt_1 .ks_wt li{-webkit-box-flex:1;height:35px;line-height:35px;border-right:solid 1px #BBB;}.ks_wt_2 .ks_wt li{background:-webkit-linear-gradient(top, #e7e7e7 0%,#dfdfdf 100%);text-indent: 20px;height:10px;width:10px;overflow:hidden; border-radius:100%;margin:5px;}.ks_wt_1 .ks_wt .ks_t2{background:-webkit-linear-gradient(top, #e7e7e7 0%,#dfdfdf 100%); color:#000;}.ks_wt_2 .ks_wt .ks_t2{background: -webkit-linear-gradient(top, #AAAAAA 0%,#979797 100%); -webkit-animation:kt2 500ms linear;}@-webkit-keyframes kt2{    0%{-webkit-transform:scale(1);}    100%{-webkit-transform:scale(1.5);}}

js

/*    zepto.kslider.js    lxk 2014.08.14    www.cnblogs.com/wingkun*/ (function ($) {        /*        参数：config        change:tab页变更事件            参数e: 当前页码        tick:自动滚动间隔时间毫秒 (不设置则不自动滚动)        maxWidth:容器最大宽度 (默认有100%)        minWidth:容器最小宽度 (默认有100%)        className:样式类名            "ks_wt_1" 标题栏-方形 (默认)            "ks_wt_2" 标题栏-小圆形            或者你自定义的类名        */        $.fn.slider = function (config) {            config = $.extend({}, { className: "ks_wt_1" }, config);            var b = $(this), tw, timer,            target = b.find(".ks_dbox"),            title = b.find(".ks_wt"),            m = { initX: 0, initY: 0, startX: 0, endX: 0, startY: 0, canmove: false },            currentTab = 0;            b.toggleClass(config.className,true);            if (config.maxWidth) b.css({ maxWidth: config.maxWidth });            if (config.minWidth) b.css({ mixWidth: config.minWidth });            title.on("click", function (e) {                if (e.target == this) return;                toTab($(e.target).index());            });            b.on("touchstart", function (e) {                var et = e.touches[0];                if ($(et.target).closest(".ks_dbox").length != 0) {                    m.canmove = true, m.initX = m.startX = et.pageX;                    m.initY = et.pageY;                    clearTimer();                }            }).on("touchmove", function (e) {                var et = e.touches[0];                if (m.canmove && Math.abs(et.pageY - m.initY) / Math.abs(et.pageX - m.initX) < 0.6) {                    //             if (m.canmove && Math.abs(et.pageX - m.startX) > 10) {                    target.removeClass("ks_ts").css("-webkit-transform", "translate3d(" + (m.endX += et.pageX - m.startX) + "px,0,0)");                    m.startX = et.pageX;                    e.preventDefault();                }            }).on("touchend", function (e) {                if (!m.canmove) return;                target.toggleClass("ks_ts", true);                tw = target.width();                //是否超过了边界                var bl = false, current = Math.abs(m.endX / tw);                if (m.endX > 0) {                    current = m.endX = 0;                    bl = true;                }                else if (m.endX < -tw * (target.children().length - 1)) {                    current = target.children().length - 1;                    bl = true;                }                if (!bl) {                    if (m.endX % tw != 0) {                        //target.css("transform", "translate(" + (m.endX = -tw*Math.abs(Math.round(m.endX/tw))) + "px,0px)");                               var str = parseInt((current + "").split(".")[1][0]);                        if (e.changedTouches[0].pageX > m.initX) {                            //往右                            current = str <= 9 ? Math.floor(Math.abs(current)) : Math.abs(Math.round(m.endX / tw));                        } else {                            //往左                            current = str >= 1 ? Math.floor(Math.abs(current)) + 1 : Math.abs(Math.round(m.endX / tw));                        }                    }                }                toTab(current);                setTimer();                m.canmove = false;            });            var move = function (i) {                target.css("-webkit-transform", "translate3d(" + (m.endX = i) + "px,0,0)");            }            var setIndex = function (i) {                return i < 0 ? 0 : i >= target.children().length ? target.children().length - 1 : i;            }            var toTab = function (i) {                i = setIndex(i), tw = target.width();                move(-tw * i), toTitle(i);                if (currentTab != i && config.change) {                    config.change(i);                }                currentTab = i            }            var toTitle = function (i) {                if (title.length == 0) return;                title.children().toggleClass("ks_t2", false).eq(i).toggleClass("ks_t2", true);            }            var setTimer = function () {                if (!config.tick) return;                if (timer) clearTimer();                timer = setInterval(function () {                    toTab(currentTab >= target.children().length - 1 ? 0 : currentTab + 1);                }, config.tick)            }            var clearTimer = function () {                clearInterval(timer);                timer = null;            }            setTimer();            return {                add: function (t, c) {                    //添加tab                    title.append("<li>" + t + "</li>");                    target.append("<div class=\"ks_warp\">" + c + "</div>");                    return this;                },                remove: function (i) {                    //移除tab                    if (title.children().length == 1) return;                    i = setIndex(i);                    title.children().eq(i).remove();                    target.children().eq(i).remove();                    if (i == currentTab) toTab(0);                    return this;                }, tab: function (i) {                    //设置或者获取当前tab                    return i ? toTab(i) : currentTab;                }            }        }    })(Zepto);

その他

デモでは基本的な zepto のみを引用しましたが、実際にはモバイル側の touch.js も非常に必要です。引用した後、コード内のクリックを zepto のタップに置き換えることができます。イベント

アドレス：https://github.com/madrobby/zepto/blob/master/src/ touch.js#files

コンテナに使用されているボックスレイアウトは、内部のHTMLスタイルに注意してください

のみサポートしていますほとんどの Webkit カーネル ブラウザ

テストはモバイル デバイスで実行する必要があり、コンピューターでは Chrome が必要です。F12 を開き、コンソールでその隣にある偽装環境は次のとおりです:

リリースは次のとおりです。急いでいますので、間違いがあればご指摘ください。デモのダウンロードはこちらから

仕事が終わって、時間がたっぷりあるので… アルバイト探しにお立ち寄りください！

asp.net/js/jquery/html5/css3/モバイル フロントエンド経験者

(座標[長沙]、業界[宝くじ業界] -- 必要に応じて)

私をサポートしてください!