https://www.xuanmo.xin/1204.html

依赖jQuery库封装全屏滚动插件,兼容移动端

发布于 分类: Js & Jq案列 5 2480

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>

 

插件源码


(function($) {
    function Page( el, options ) {
        this.pageList = options.pageList;
        this.btnList = null;
        this.differ = 1;
        this.dire = 1;
        this.nIndex = el.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() { 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; // 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; // 判断滑动方向 var 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'), scrollObj: $(window), 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');
        }
    });
    

     

    源码与案例展示

    百度云下载
    密码:wa21

    DEMO展示

    作者专栏:Xuanmo

    前端爱好者,热爱前端开发,欢迎和我成为朋友。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
    表情
    贴图
    表情加载中...

    换一张

    • 包丽宇 黑龙江省哈尔滨市 电信

      回复

      交换友链挂上我的链给我留言吧

    • 包丽宇 黑龙江省哈尔滨市 电信

      回复

      厉害了 哥 /kiss

    • 李志坚 上海市 鹏博士长城宽带

      回复

      嗨、博主你好,我是李志坚 我又来咯,你的博客真棒,做友链吗? 我网站名称:李志坚个人博客 http://www.lizhijian.net/ 如果交换友链挂上我的链给我留言吧。

    已经没有了!