jQuery touchSwipe.js 移动触摸(touch)轻刷(swipe)开发实例

jQuery touchSwipe Carousel refer to: https://github.com/boompx/jQuery-touchSwipe-Carousel

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 6077
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    $(".bp-touchSwipe").each(function() {
        function e() {
            a.find(".bp-touchSwipe_inner").css({
                width: a.find(".bp-inner_item").length * a.find(".bp-inner_item").width()
            })
        }
        var a = $(this);
        e();
        window.onresize = e;
        a.find(".bp-touchSwipe_inner").width() > a.width() && a.swipe({
            swipeStatus: function(f, c, b, d, e, g) {
                f = parseInt(a.find(".bp-touchSwipe_inner").css("left"));
                d = a.find(".bp-inner_item");
                d.last().position();
                d.last().width();
                a.width();
                b = "left" == b ? -1 : 1;
                "end" == c && (-1 == b ? (c = f + b * d.width(), b = -a.find(".bp-touchSwipe_inner").width() + a.innerWidth(), a.find(".bp-touchSwipe_inner").css("left", Math.max(c, b))) : 1 == b && (c = f + b * d.width(), a.find(".bp-touchSwipe_inner").css("left", Math.min(0, c))))
            },
            threshold: 0,
            maxTimeThreshold: 5E3,
            fingers: "all"
        })
    })
});

编译

CSS

.bp-touchSwipe {
    overflow: hidden;
    position: relative;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.bp-touchSwipe:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.bp-touchSwipe,
.bp-touchSwipe .bp-touchSwipe_inner,
.bp-touchSwipe .bp-inner_item {
    height: 220px;
}
.bp-touchSwipe .bp-touchSwipe_inner {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    -moz-transition: all, 0.1s, ease;
    -o-transition: all, 0.1s, ease;
    -webkit-transition: all, 0.1s, ease;
    transition: all, 0.1s, ease;
}
.bp-touchSwipe .bp-inner_item {
    width: 320px;
    float: left;
}
.bp-touchSwipe .bp-inner_item:nth-child(6n+1) {
    background-color: #9ca0a1;
}
.bp-touchSwipe .bp-inner_item:nth-child(6n+2) {
    background-color: #76cbce;
}
.bp-touchSwipe .bp-inner_item:nth-child(6n+3) {
    background-color: #c1dbdc;
}
.bp-touchSwipe .bp-inner_item:nth-child(6n+4) {
    background-color: #e0676e;
}
.bp-touchSwipe .bp-inner_item:nth-child(6n+5) {
    background-color: #b4d030;
}
.bp-touchSwipe .bp-inner_item:nth-child(6n+6) {
    background-color: #61585d;
}
body {
    background-color: #f7f7f7;
    margin-top: 30px;
}
.footer {
    background-color: #fff;
    padding: 30px;
    margin-top: 30px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Bad Script', cursive;
}
pre.prettyprint.bp-prettyprint {
    padding: 15px !important;
    border: 0 !important;
    font-family: consolas;
    font-size: 14px;
    background-color: white !important;
}
.callout-demo pre.prettyprint.bp-prettyprint {
    max-height: 415px;
}
pre.prettyprint.bp-prettyprint span.com {
    color: #919d9f;
}
pre.prettyprint.bp-prettyprint span.pln {
    color: #395063;
}
pre.prettyprint.bp-prettyprint span.tag {
    color: #6a93d0;
}
pre.prettyprint.bp-prettyprint span.atv {
    color: #05ad97;
}
pre.prettyprint.bp-prettyprint span.pun,
pre.prettyprint.bp-prettyprint span.opn,
pre.prettyprint.bp-prettyprint span.clo {
    color: #b9947b;
}
pre.prettyprint.bp-prettyprint span.atn {
    color: #a95ebb;
}

HTML

<div class="bp-touchSwipe">
    <div class="bp-touchSwipe_inner">
        <div class="bp-inner_item"></div>
        <div class="bp-inner_item"></div>
        <div class="bp-inner_item"></div>
        <div class="bp-inner_item"></div>
        <div class="bp-inner_item"></div>
        <div class="bp-inner_item"></div>
        <div class="bp-inner_item"></div>
        <div class="bp-inner_item"></div>
    </div>
</div>

<hr />

jQuery touchSwipe Carousel refer to: https://github.com/boompx/jQuery-touchSwipe-Carousel

编辑器支持Emmet

快捷键

jQuery touchSwipe Carousel refer to: https://github.com/boompx/jQuery-touchSwipe-Carousel

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

three.js octree 光线投射（raycasting）实现选择交互的代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：