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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• swiper.js插件实现pc端文本上下滑动功能示例
• 解决Angular.js中使用Swiper插件不能滑动的问题
• js插件实现图片滑动验证码
• jQuery使用unlock.js插件实现滑动解锁
• 基于touch.js手势库+zepto.js插件开发图片查看器（滑动、缩放、双击缩放）
• 内容滑动切换效果jquery.hwSlide.js插件封装