Hammer.js+jQuery 左右滑动图片浏览移动网站模板

Mobile Layout with HammerJS。一款适合图片为全屏背景的移动网站模板。

template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// requestAnimationFrame and cancel polyfill
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

// carousel class
function Carousel(el) {
    var self = this;
    var $el = $(el);

var $container = $("> ul", $el);
    var $panes = $("> ul > li", $el);

var paneWidth = 0;
    var paneCount = $panes.length;
    var paneActiveIdx = 1;
    var paneActiveOffset = 0;

// setup
    self.init = function() {
        $(window).on("load resize orientationchange", function() {
            setPaneDimensions();
            self.showPane(paneActiveIdx);
        });
    };

// set pane index if valid
    self.showPane = function(idx, animated) {
        var index = Math.max(0, Math.min(idx, paneCount - 1));
        paneActiveIdx = index;

var $wrapper = $("body");
        var newCls = "show-" + index;
        $wrapper.removeClass(function(idx, cls) {
            return (cls.match(/(^|\s)show-\S+/g) || []).join(' ');
        });
        $wrapper.addClass(newCls);

//var offset = ;
        paneActiveOffset = -(100 / paneCount) * paneActiveIdx;
        setContainerOffset(paneActiveOffset, animated);
    };

self.throttledShowPane = _.debounce(function(idx, animated) {
        self.showPane(idx, animated);
    }, 100);

// next pane
    self.next = function() {
        self.throttledShowPane(paneActiveIdx + 1, true);
    };

// prev pane
    self.prev = function() {
        self.throttledShowPane(paneActiveIdx - 1, true);
    };

// set pane and container sizes
    function setPaneDimensions() {
        paneWidth = $el.width();
        _.map($panes, function(pane) {
            $(pane).width(paneWidth);
        });
        $container.width(paneWidth * paneCount);
    }

// adjust container to active pane
    function setContainerOffset(percent, animated) {
        $container.removeClass("animate");
        if (animated) {
            $container.addClass("animate");
        }

if (Modernizr.csstransforms3d) {
            $container.css("transform", "translate3d(" + percent + "%,0,0) scale3d(1,1,1)");
        } else if (Modernizr.csstransforms) {
            $container.css("transform", "translate(" + percent + "%,0)");
        } else {
            var px = ((paneWidth * paneCount) / 100) * percent;
            $container.css("left", px + "px");
        }
    }

function updateContainerOffsetX(deltaX, direction) {
        var dragOffset = ((100 / paneWidth) * deltaX) / paneCount;

var slowRight = paneActiveIdx == 0 && direction == Hammer.DIRECTION_RIGHT;
        var slowLeft = paneActiveIdx == paneCount - 1 && direction == Hammer.DIRECTION_LEFT;
        if (slowLeft || slowRight) {
            dragOffset *= .4;
        }

setContainerOffset(dragOffset + paneActiveOffset);
    }

function hammerTime(ev) {
        switch (ev.type) {
            case 'panmove':
                updateContainerOffsetX(ev.deltaX, ev.direction);
                break;
            case 'swipeleft':
                self.next();
                break;
            case 'swiperight':
                self.prev();
                break;
        }
    }

var container = document.getElementById("carousel");
var c = new Carousel(container);
c.init();

// Nav click event
$('[data-nav=""]').on("click", function() {
    var $self = $(this);
    c.throttledShowPane($self.data("show"), true);
});

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:900,400);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
html,
body {
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}
body {
    background: #f0f0f0;
    color: #212121;
    font-family: "Roboto", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
}
#topbar {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #05384c;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    height: 3em;
    line-height: 3em;
    position: fixed;
    top: 0;
    z-index: 1;
}
#topbar a {
    display: block;
    color: #fff;
}
.active-nav {
    position: relative;
}
.active-nav__bar {
    background-color: #0e9fd8;
    top: 2.5em;
    position: absolute;
    width: 33.33333%;
    height: 0.5em;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.show-0 .active-nav__bar {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.show-1 .active-nav__bar {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.show-2 .active-nav__bar {
    -webkit-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
}
#carousel {
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-transform-style: preserve-3d;
    margin: 3em auto 0;
    overflow: hidden;
}
#carousel > ul {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    height: 100%;
    list-style: none outside;
    margin: 0;
    overflow: hidden;
}
#carousel > ul.animate {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
#carousel > ul > li {
    height: 100%;
    float: left;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.page {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}
.page.centery {
    background-image: url(https://c2.staticflickr.com/6/5016/5474953677_e90dfcbb71_b.jpg);
}
.page.lefty {
    background-image: url(https://c1.staticflickr.com/9/8400/8939364295_f6a2dfee38_b.jpg);
    left: -100%;
}
.page.righty {
    background-image: url(https://c3.staticflickr.com/3/2922/14402577354_af56e71312_c.jpg);
    left: 100%;
}
.page header {
    background: rgba(255, 255, 255, 0.5);
    padding: 1em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.page header h1 {
    font-size: 3em;
}

HTML

<nav id="topbar" role="navigation" class="valign-center">
        <div class="row collapse text-center">
            <div class="column small-4"><a href="#" data-nav="" data-show="0"><i class="fa fa-home fa-2x fa-fw"></i></a>
            </div>
            <div class="column small-4"><a href="#" data-nav="" data-show="1"><i class="fa fa-globe fa-2x fa-fw"></i></a>
            </div>
            <div class="column small-4"><a href="#" data-nav="" data-show="2"><i class="fa fa-navicon fa-2x fa-fw"></i></a>
            </div>
            <div class="active-nav">
                <div class="active-nav__bar"></div>
            </div>
        </div>
    </nav>

<main id="carousel" role="main" class="">
        <ul>
            <li class="page lefty">
                <header>
                    <div class="row text-center">
                        <h1>Left Page</h1>
                        <p>
                            swipe to change
                            <i class="fa fa-angle-right"></i>
                        </p>
                    </div>
                </header>
            </li>
            <li class="page centery">
                <header>
                    <div class="row text-center">
                        <h1>Center Page</h1>
                        <p>
                            <i class="fa fa-angle-left"></i> swipe to change
                            <i class="fa fa-angle-right"></i>
                        </p>
                    </div>
                </header>
            </li>
            <li class="page righty">
                <header>
                    <div class="row text-center">
                        <h1>Right Page</h1>
                        <p>
                            <i class="fa fa-angle-left"></i> swipe to change
                        </p>
                    </div>
                </header>
            </li>
        </ul>
    </main>
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>

Mobile Layout with HammerJS。一款适合图片为全屏背景的移动网站模板。

template

编辑器支持Emmet

快捷键

Mobile Layout with HammerJS。 一款适合图片为全屏背景的移动网站模板。

template

HTML5+jQuery.waypoints旅行者的时间表页面模板

HTML5 jQuery3 Bootstrap3介绍幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Mobile Layout with HammerJS。一款适合图片为全屏背景的移动网站模板。