• 首页
  • 攻略

    • 〔什么是全屏滚动〕手机全屏大字滚动!

    2023-03-27 11:48 51次浏览 攻略

    GitHub下载地址：

    满足条件：

    jquery（1.9.0或更高版本）

    兼容性

    Chrome，Firefox和Safari等现代浏览器在桌面和智能手机上都经过了测试。应该在IE8和IE9上正常工作。

    基本用法

    一个页面滚动让您将您的网站变成一个页面滚动网站，允许用户一次滚动一页。例如，苹果的iPhone 5S网站使用相同的技术。

    要添加到您的网站，只需包括最新的jQuery库一起jquery.one，one为您的文档<head>和调用的功能如下：

    容器“主”必须在body标签下面一层，以使其工作全页面。现在调用该函数来激活，如下所示：

    $（“. main ”）。onepage_scroll（{
    sectionContainer ： “ section ”， // sectionContainer接受任何类型的选择器
    easing： “ ease ”， //缓动选项接受CSS3缓动动画，如“ease”，“linear”，“ease -in“，
    // ”ease-out“，”ease-in-out“，
    animationTime ： 1000， // AnimationTime让你定义每个部分用于动画
    pagination： true， //你可以显示或隐藏分页。显示为真，为隐藏为假。
    updateURL： false， //如果您希望在用户滚动到每个页面时自动更新URL。
    beforeMove ： function（ index）{}， //这个选项接受一个回调函数。该功能将在页面移动之前被调用。
    afterMove ： function（ index）{}， //这个选项接受一个回调函数。该功能将在页面移动后调用。
    loop： false， //当用户在第一页/最后一页上向上/向下导航时，可以将页面循环回到顶部/底部。
    keyboard： true， //你可以激活键盘控制
    responsiveFallback ： false， //你可以通过定义在浏览器的宽度退回到正常页面滚动
    //你想被触发响应回退。例如，将其设置为600和每当
    //浏览器的宽度小于600。
    direction： “vertical” //您现在可以定义单页滚动动画的方向。可用的选项是“垂直”和“水平”。默认值是“垂直”。 }）;

    键盘快捷键

    您也可以使用热键触发页面移动：

    向上箭头/向上翻页

    按向上箭头或向上翻页键可以将页面向上移动一个。

    向下箭头/ Page Donw

    按向下箭头或向下翻页键可以将页面向下移动一个。

    空格键

    按下空格键可以将页面向下移动一个。

    Home

    按Home键可以返回到第一页。

    End

    按End键可以进入最后一页。

    公共方法

    您也可以以编程方式触发页面移动：

    $ .（）

    这个方法允许你把页面向上移动一个。这个动作相当于向上/向下滑动。

    $（“. main ”）。moveUp（）;

    $ .（）

    这种方法可以让你将页面向下移动一个。这个动作相当于向下滚动/向上滑动。

    $（“. main ”）。moveDown（）;

    $ .（PAGE_INDEX）

    此方法允许您以编程方式移动到指定的页面索引。

    $（“. main ”）。moveTo（3）;

    回调

    您可以使用回调在页面移动之前或之后执行操作。

    beforeMove（CURRENT_PAGE_INDEX）

    这个回调在插件执行之前被调用。

    $（“. main ”）。onepage_scroll（{ beforeMove ： function（index）{ …
    }
    }）;

    afterMove（next_page_index）

    在执行移动动画之后调用这个回调函数。

    $（“. main ”）。onepage_scroll（{ afterMove ： function（index）{ …
    }
    }）;

    1.文章《〔什么是全屏滚动〕手机全屏大字滚动!》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《〔什么是全屏滚动〕手机全屏大字滚动!》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑