JS实现滑动插件

本文实例为大家分享了JS实现滑动插件的具体代码,供大家参考,具体内容如下

基本思路是封装一个Slider类, 拥有默认初始配置参数。

Slider.prototype(原型链上)拥有实现滑动的方法,通过监听手势,实现滑动的效果。

比较复杂的滑动效果, 可以使用Swiper.js 来实现。

/* PollyFill for iOS 5.* */

if (!Function.prototype.bind) {

Function.prototype.bind = function (oThis) {

var args = Array.prototype.slice.call(arguments, 1)

var f2bind = this

var fnop = function () {}

var bound = function () {

return f2bind.apply(this instanceof fnop && oThis

? this

: oThis,

args.concat(Array.prototype.slice.call(arguments)))

}

fnop.prototype = this.prototype

bound.prototype = new fnop()

return bound

}

}

// 添加浏览器前缀

function prefix(style) {

var vendor = (function() {

var transArr = ['transform', 'webkitTransform', 'MozTransform', 'msTranform', 'OTransform'],

vendors = ['', 'webkit', 'Moz', 'ms', 'O'],

elementStyle = document.createElement('div').style

for (var i = 0; i < vendors.length; i++) {

if (transArr[i] in elementStyle) {

return vendors[i]

}

}

return false

})()

if (vendor === false) return false

if (vendor === '') return style

return vendor + style.charAt(0).toUpperCase() + style.substr(1)

}

var TRANSFORM = prefix('transform'),

TRANSITION = prefix('transition')

var Slider = function(options) {

// 初始化配置参数

this.options = $.extend({

slideWrap: '.pages', // 容器

slideItem: '.page', // 滑动单元的元素

direction: 'Y', // 滑动的方向

effect: 'slide', // 滑动的效果

triggleDist: 100, // 触发滑动的手指移动最小位移

followFinger: true, // 是否跟随手指移动

duration: .4, // 翻页的延时

currentIdx: 0 // 初始显示的页码

}, options)

var EffectDict = {

'slide' : ['slide', 'slide'],

'scale' : ['slide', 'scale']

}

this.pagesWrap = document.querySelector(this.options.slideWrap)

this.pages = document.querySelectorAll(this.options.slideItem)

this.hook = this.options.slideController

this._total = this.pages.length

this._pageX = 0

this._pageY = 0

this._distance = 0 // 页面之间切换的距离

this._moveDist = 0 // touch 滑动的距离

this._supportTouch = 'ontouchend' in window

this._touching = false

this._enter = this[EffectDict[this.options.effect][0]].bind(this)

this._leave = this[EffectDict[this.options.effect][1]].bind(this)

this._init()

this._bindEvents()

}

Slider.prototype = {

_init: function() {

var width = this.pagesWrap.clientWidth,

height = this.pagesWrap.clientHeight,

currentIdx = this.options.currentIdx,

pages = this.pages,

total = this._total,

distance = this._distance = (this.options.direction == 'Y' ? height : width)

// 初始化各个 page 的位置

for (var i = 0; i < this._total; i++) {

if (i == currentIdx) {

pages[i].classList.add('current')

} else {

this._enter(pages[i], i < currentIdx ? -distance : distance, 2)

}

}

},

_bindEvents: function() {

var _this = this,

pagesWrap = this.pagesWrap

var events = this._supportTouch ? 'touchstart touchmove touchend touchcancel' : 'mousedown mousemove mouseup mousecancel'

events.split(' ').forEach(function(e) {

pagesWrap.addEventListener(e, _this)

})

window.addEventListener('orientationchange', this)

window.addEventListener('resize', this)

},

handleEvent: function(e) {

switch (e.type) {

case 'orientationchange':

case 'resize':

this._init()

break

case 'touchstart':

case 'mousedown':

this._start(e)

break

case 'touchmove':

case 'mousemove':

this._move(e)

break

case 'touchend':

case 'touchcancel':

case 'mouseup':

case 'mousecancel':

this._end(e)

break

}

},

_start: function(e) {

if (this._touching) {

e.preventDefault()

e.stopPropagation()

return

}

this._touching = true

this._moveDist = 0

var touches = (this._supportTouch ? e.touches[0] : e),

distance = this._distance,

enter = this._enter

var $current = this.pages[this.options.currentIdx],

$next = $current.nextElementSibling,

$prev = $current.previousElementSibling

this._pageX = touches.pageX

this._pageY = touches.pageY

$current.style.zIndex = 1

if ($next) {

$next.style.zIndex = 2

enter($next, distance)

}

if ($prev) {

$prev.style.zIndex = 2

enter($prev, -distance)

}

},

_move: function(e) {

e.preventDefault()

if (!this._touching) return

var touches = (this._supportTouch ? e.touches[0] : e),

direction = this.options.direction,

distance = this._distance

var currentIdx = this.options.currentIdx,

$current = this.pages[this.options.currentIdx],

$next = $current.nextElementSibling,

$prev = $current.previousElementSibling,

xDist = touches.pageX - this._pageX,

yDist = touches.pageY - this._pageY,

enter = this._enter,

leave = this._leave,

moveDist = this._moveDist = (direction == 'X' ? xDist : yDist)

if (this.options.followFinger) {

$next && enter($next, moveDist + distance)

$prev && enter($prev, moveDist - distance)

// 因为不能翻页,所以制造拖动困难的效果

if ((currentIdx == 0 && moveDist > 0) || (currentIdx == this._total && moveDist < 0)) {

return this.slide($current, moveDist / 4)

}

leave($current, moveDist)

}

},

_end: function(e) {

var move = this._moveDist,

distance = this._distance,

triggleDist = this.options.triggleDist,

enter = this._enter,

$current = this.pages[this.options.currentIdx],

$next = $current.nextElementSibling,

$prev = $current.previousElementSibling

this._touching = false

this._enter($current, 0)

$next && enter($next, distance)

$prev && enter($prev, -distance)

if ($next && move < -triggleDist && this.hook.shouldGoToNext($current)) return this._next()

if ($prev && move > triggleDist && this.hook.shouldGoToPrev($current)) return this._prev()

},

_next: function() {

this.go2page(this.options.currentIdx + 1)

},

_prev: function() {

this.go2page(this.options.currentIdx - 1)

},

go2page: function(idx) {

var $current = this.pages[this.options.currentIdx],

$target = this.pages[idx],

enter = this._enter,

leave = this._leave,

distance = (idx < this.options.currentIdx ? this._distance : -this._distance)

$($target).one('webkitTransitionEnd', function() {

$current.classList.remove('current')

$target.classList.add('current')

this.hook.didGoToPage($target, $current)

}.bind(this))

leave($current, distance)

enter($target, 0)

this._moveDist = 0

this.options.currentIdx = idx

},

/**

* 切页的效果

* 目前只支持两种效果:

* 1. Slide(普通的滑动)

* 2. Scale(缩放滑动)

*/

slide: function(el, val, need) {

need = need || 1

el.style.webkitTransition = (need == 1) ? 'all 0.4s' : ''

el.style[TRANSFORM] = 'translate3d(' + ('Y' == this.options.direction ? '0, ' + val + 'px' : (val + 'px, 0')) + ',0)'

},

scale: function(el, val) {

el.style.webkitTransition = 'all 0.4s'

el.style[TRANSFORM] = 'scale(' + (1 - Math.round(Math.abs(val) / this._distance / 4*100) / 100) + ') translateZ(0)'

}

}

var slideController = {

shouldGoToPrev: function(el) {

return false;

},

shouldGoToNext: function(el) {

return false;;

},

didGoToPage: function(el, prevEl) {

return false;

}

}

function query(selector){

return document.querySelector(selector);

}

以上是 JS实现滑动插件 的全部内容, 来源链接: utcz.com/z/318153.html

回到顶部