html+css3移动端滑动骨架
1、新建html文档。
2、书写hmtl代码。
<div class="container">
<div class="swiper">
<div class="item">
<h2 class="title fadeInUp animated">它无孔不入</h2>
</div>
<div class="item">
<h2 class="title fadeInUp animated">你无处可藏</h2>
</div>
<div class="item">
<h2 class="title fadeInUp animated">不是它可恶</h2>
</div>
<div class="item">
<h2 class="title fadeInUp animated">而是它不懂你</h2>
</div>
<div class="item">
<h2 class="title fadeInUp animated">我们试图</h2>
</div>
<div class="item">
<h2 class="title fadeInUp animated">做些改变</h2>
</div>
</div>
</div>
3、初始化css代码。
<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
.container { height: 100%; background-color: #efeff4; }
.item { color: #ffffff; background-color: #000000; }
.title { margin-top: 200px; text-align: center; }
</style>
4、书写css3代码。
<style>
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes fadeInUp { from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp { from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
.swiper { height: 100%; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.item { height: 100%; background-position: center center; background-size: cover; position: relative; overflow: hidden; float: left; }
.item.active .animated { -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 1; }
.item:not(.active) .animated { -webkit-animation: none; animation: none; opacity: 0; }
</style>
5、书写并添加js代码。
<script src="js/swiper.js"></script>
<script>
var swiper = new Swiper();
console.log(swiper._height);
</script>
6、书写js代码。
(function (name, definition) {
if (typeof define === 'function') {
define(definition);
} else {
this[name] = definition();
}
})('Swiper', function () {
function Swiper(options) {
this.version = '1.4.0';
this._default = {container: '.swiper', item: '.item', direction: 'vertical', activeClass: 'active', threshold: 50, duration: 300};
this._options = extend(this._default, options);
this._start = {};
this._move = {};
this._end = {};
this._prev = 0;
this._current = 0;
this._offset = 0;
this._eventHandlers = {};
this.$container = document.querySelector(this._options.container);
this.$items = this.$container.querySelectorAll(this._options.item);
this.count = this.$items.length;
this._width = this.$container.offsetWidth;
this._height = this.$container.offsetHeight;
this._init();
this._bind();
}
Swiper.prototype._init = function () {
var me = this;
var width = me._width;
var height = me._height;
var w = width;
var h = height * me.count;
if (me._options.direction === 'horizontal') {
w = width * me.count;
h = height;
}
me.$container.style.width = w + 'px';
me.$container.style.height = h + 'px';
Array.prototype.forEach.call(me.$items, function ($item, key) {
$item.style.width = width + 'px';
$item.style.height = height + 'px';
});
me._activate(0);
};
Swiper.prototype._bind = function () {
var me = this;
this.$container.addEventListener('touchstart', function (e) {
me._start.x = e.changedTouches[0].pageX;
me._start.y = e.changedTouches[0].pageY;
me.$container.style['-webkit-transition'] = 'none';
me.$container.style.transition = 'none';
}, false);
this.$container.addEventListener('touchmove', function (e) {
me._move.x = e.changedTouches[0].pageX;
me._move.y = e.changedTouches[0].pageY;
var distance = me._move.y - me._start.y;
var transform = 'translate3d(0, ' + (distance - me._offset) + 'px, 0)';
if (me._options.direction === 'horizontal') {
distance = me._move.x - me._start.x;
transform = 'translate3d(' + (distance - me._offset) + 'px, 0, 0)';
}
me.$container.style['-webkit-transform'] = transform;
me.$container.style.transform = transform;
e.preventDefault();
}, false);
this.$container.addEventListener('touchend', function (e) {
me._end.x = e.changedTouches[0].pageX;
me._end.y = e.changedTouches[0].pageY;
var distance = me._end.y - me._start.y;
if (me._options.direction === 'horizontal') {
distance = me._end.x - me._start.x;
}
me._prev = me._current;
if (distance > me._options.threshold) {
me._current = me._current === 0 ? 0 : --me._current;
} else if (distance < -me._options.threshold) {
me._current = me._current < (me.count - 1) ? ++me._current : me._current;
}
me._show(me._current);
e.preventDefault();
}, false);
this.$container.addEventListener('transitionEnd', function (e) {
}, false);
this.$container.addEventListener('webkitTransitionEnd', function (e) {
if (e.target !== me.$container) {
return false;
}
if (me._current != me._prev) {
me._activate(me._current);
var cb = me._eventHandlers.swiped || noop;
cb.apply(me, [me._prev, me._current]);
}
e.preventDefault();
}, false);
};
Swiper.prototype._show = function (index) {
this._offset = index * this._height;
var transform = 'translate3d(0, -' + this._offset + 'px, 0)';
if (this._options.direction === 'horizontal') {
this._offset = index * this._width;
transform = 'translate3d(-' + this._offset + 'px, 0, 0)';
}
var duration = this._options.duration + 'ms';
this.$container.style['-webkit-transition'] = duration;
this.$container.style.transition = duration;
this.$container.style['-webkit-transform'] = transform;
this.$container.style.transform = transform;
};
Swiper.prototype._activate = function (index){
var clazz = this._options.activeClass;
Array.prototype.forEach.call(this.$items, function ($item, key){
$item.classList.remove(clazz);
if (index === key) {
$item.classList.add(clazz);
}
});
};
Swiper.prototype.next = function () {
if (this._current >= this.count - 1) {
return;
}
this._prev = this._current;
this._show(++this._current);
return this;
};
Swiper.prototype.on = function (event, callback) {
if (this._eventHandlers[event]) {
throw new Error('event ' + event + ' is already register');
}
if (typeof callback !== 'function') {
throw new Error('parameter callback must be a function');
}
this._eventHandlers[event] = callback;
return this;
};
function extend(target, source) {
for (var key in source) {
target[key] = source[key];
}
return target; }
function noop() {
}
return Swiper;
});
7、代码整体结构。
8、查看效果。
