依赖jQuery库封装全屏滚动插件,兼容移动端
分类: 解决问题 5588 5
jQuery封装插件语法格式:
第一次写jQuery插件,在写这个插件的时候,还是学到一点东西,在不会的地方用百度搜了答案,也算是对自己的一个知识巩固,有什么不对的地方望大神指点,谢谢 /kiss
(function($){
$.fn.PluginName = function(){
//PluginName = 插件名称
//this = jQuery代理对象
}
})(jQuery);
//调用方法
$('xxx').PluginName();
插件共有5个参数,json方式传入
参数名 参数值
1. pageList: $('.ui-page') jQuery代理对象,滚动页元素
2. pageBtnWrap: $('.ui-page-wrap') jQuery代理对象,滚动按钮的容器
3. transition: 1000 动画过渡时间,默认时间1000
4. beforeFunction: function() {} 匿名函数,在动画执行之前需要执行的函数
5. callback: function( currentIndex, maxIndex ) {} 匿名函数,每屏动画执行完成需要做的事情,可传入两个参数
currentIndex: 当前可见元素的索引值
maxIndex: 所有全屏滚动元素的length
演示页面html代码如下:
<ul class="ui-page-wrap">
<li class="ui-page">
<img src="http://file.xuanmomo.com/T1-150.jpg" class="left" alt="">
<h2 class="right">文字信息</h2>
<h2 class="callback-txt">回调函数文字第一页</h2>
</li>
<li class="ui-page">
<h2 class="left">文字信息</h2>
<img src="http://file.xuanmomo.com/T10-150.jpg" class="right" alt="">
<h2 class="callback-txt">回调函数文字二</h2>
</li>
<li class="ui-page">
<h2 class="callback-txt">回调函数文字三</h2>
</li>
</ul>
插件源码
/* 定义每屏高度 */
html, body, .ui-page-wrap, .ui-page { width: 100%; height: 100%; }
/* 右边的指示按钮 */
.ui-btn-wrap { position: fixed; top: 50%; right: 30px; }
.ui-btn-wrap li { width: 15px; height: 15px; margin-bottom: 10px; border-radius: 50%; background: #fff; }
.ui-btn-wrap li.on { background: #3f908c; }
(function($) {
function Page(element, options) {
this.pageList = options.pageList;
this.btnList = null;
this.differ = 1;
this.dire = 1;
this.nIndex = element.attr('data-index'),
this.pageBtnWrap = options.pageBtnWrap;
this.beforeFunction = options.beforeFunction;
this.callback = options.callback;
this.maxIndex = this.pageList.length - 1;
this.transition = options.transition;
}
Page.prototype = {
constructor: Page,
// 初始化
init: function($this) {
var This = this;
// 创建滚动按钮容器
$this.attr('data-index', 0);
this.pageBtnWrap = this.pageBtnWrap ||
(function() {
$this.after('
');
return $('.ui-btn-wrap');
}());
// 生成滚动按钮
this.pageList.each(function(i) {
This.pageBtnWrap.append('');
});
// 保存滚动按钮并为第一个添加class
this.btnList = this.pageBtnWrap.children();
this.btnList.first().addClass('on');
// 滚动按钮容器计算顶部偏移量
this.pageBtnWrap.css('marginTop', this.btnList.first().outerHeight(true) * this.btnList.length / -2);
this.beforeFunction && this.beforeFunction();
this.scrollFn($this);
this.clickRoll($this);
},
// 处理浏览器滚动方向
scrollFn: function($this) {
var This = this,
y = 0,
_y = 0,
touch = null;
// pc端滚动
// DOMMouseScroll 火狐浏览器滚动事件
$(window).bind('onmousewheel mousewheel DOMMouseScroll', function(e) {
// e.preventDefault();
// 判断滚动的方向
This.differ = e.originalEvent.detail ?
(e.originalEvent.detail > 0 ? 1 : 0) :
(e.originalEvent.wheelDelta > 0 ? 0 : 1);
This.nIndex = $this.attr('data-index');
if (This.differ) {
if (++This.nIndex > This.maxIndex) {
This.nIndex = This.maxIndex;
return;
}
} else {
if (--This.nIndex < 0) {
This.nIndex = 0;
return;
}
}
This.nIndex = This.nIndex;
if (!$this.is(':animated')) {
This.whellRoll(This, $this, This.nIndex);
}
});
// 移动端滚动
$(document).bind('touchstart', function(e) {
y = e.originalEvent.touches[0].pageY;
This.nIndex = $this.attr('data-index');
})
.bind('touchmove', function(e) {
e.preventDefault();
_y = e.originalEvent.touches[0].pageY;
// 判断滑动方向
dire = y - _y > 0 ? 1 : 0;
if (dire) {
if (++This.nIndex > This.maxIndex) {
This.nIndex = This.maxIndex;
return;
}
} else {
if (--This.nIndex < 0) {
This.nIndex = 0;
return;
}
}
_y = _y;
This.nIndex = This.nIndex;
if (!$this.is(':animated')) {
This.whellRoll(This, $this, This.nIndex);
}
});
},
// 按钮点击切换功能
clickRoll: function($this) {
var This = this;
this.btnList.click(function() {
This.nIndex = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
if (!$this.is(':animated')) {
This.whellRoll(This, $this, This.nIndex);
}
});
},
// 滚动功能
whellRoll: function(This, obj, n) {
// 滚动按钮添加class
This.btnList.eq(n).addClass('on').siblings().removeClass('on');
obj.animate({
top: '-' + n + '00%'
}, This.transition, function() {
// 执行回调
This.callback && This.callback(n, This.maxIndex);
})
// 将更新后的index重新赋值
.attr('data-index', n);
}
}
var init = {
pageList: $('.ui-page'),
transition: 1000
}
$.fn.fullPage = function(options) {
var oPage = new Page(this, $.extend(init, options));
oPage.init(this);
}
}(jQuery));
调用方法
$('.ui-page-wrap').fullPage({
beforeFunction: function() {
$('.ui-page').eq(0).children().addClass('on');
},
callback: function(i) {
$('.ui-page').eq(i).children().addClass('on').parent().siblings().children().removeClass('on');
}
});
共 5 条评论关于 “依赖jQuery库封装全屏滚动插件,兼容移动端”