m.lom599.com_手机版乐白家网址_乐百家手机首页登录

jQuery的Scrollify插件实现滑动到页面下一节点,使

作者: 手机版乐白家网址  发布:2019-07-17

一、安装DNode

有时我们需要做一个单页面介绍产品特性,而单页面内容非常多且页面非常长,为了快速定位到产品特性节点,我们使用js侦听用户滚轮事件,当用户触发滚轮滑动或者使用手势触屏滑动时,即可定位到相应的节点。一款jQuery插件叫Scrollify帮我们做到了。

现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码。来看看它是如何工作的。

1, for nodejs, 执行

Scrollify需要jQuery 1.6 以及缓冲动画easing插件配合来实现。HTML基本结构如下:

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

复制代码 代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>scrollify</title> 
<!--[if lt IE 9]> 
<script src="html5shiv.min.js"></script> 
<![endif]--> 
<script src="jquery.js"></script> 
<script src="jquery.easing.min.js"></script> 
<script src="jquery.scrollify.min.js"></script> 
<script> 
  $(function() { 
    $.scrollify({ 
      section : "section", 
    }); 
  }); 
</script> 
</head> 
<body> 
  <section></section> 
  <section></section> 
</body> 
</html>

History 对象 pushState() 这个方法有3个参数,你可以从上面的例子看到。第一个参数,是一个Json对象 , 在你储存有关当前URl的任意历史信息.第二个参数,title 就相当于传递一个文档的标题 ,第三个参数是用来传递新的URL. 你将看到浏览器的地址栏发生变化而当前页面并没刷新。

$ sudo npm install dnode

以下是scrollify的默认选项配置:

让我们看一个例子,在这个例子中我们将在每个独立的URL中存储一些任意数据。

2, for php, 利用composer来安装DNode php

$.scrollify({ 
    section : "section", 
    sectionName : "section-name", 
    easing: "easeOutExpo", 
    scrollSpeed: 1100, 
    offset : 0, 
    scrollbars: true, 
    before:function() {}, 
    after:function() {} 
}); 
for(i=0;i<5;i  ){
 var stateObject = {id: i};
 var title = "Wow Title " i;
 var newUrl = "/my/awesome/url/" i;
 history.pushState(stateObject,title,newUrl);
}

执行下列语句下载composer

选项说明:

现在运行,点击浏览器的返回按钮,查看URL是怎么改变的。对于每次URL的改变,是因为它存储了历史状态“id”以及对应的值。但是我们怎么重新获得历史状态,并且在此基础上做些事情呢?我们需要对“popstate”添加事件监听器,这将会在每次历史对象的状态改变的时候触发。

复制代码 代码如下:

section:节点部分选择器.
sectionName:每一个section节点对应的data属性.
jQuery的Scrollify插件实现滑动到页面下一节点,使用DNode实现php和nodejs之间通信的简单实例。easing:定义缓冲动画.
offset:定义每个色彩tion节点的偏移量.
scrollbars:是否显示滚动条.
before:回调函数,滚动开始前触发.
after:回调函数,滚动完成后触发.

for(i=0;i<5;i  ){
 var stateObject = {id: i};
 var title = "Wow Title " i;
 var newUrl = "/my/awesome/url/" i;
 history.pushState(stateObject,title,newUrl);
 alert(i);
}

window.addEventListener('popstate', function(event) {
 readState(event.state);
});

function readState(data){
 alert(data.id);
}

$ wget

Scrollify还提供了方法调用,如:

现在你会看到无论什么时候你点击返回按钮,一个“popstate”事件就会被触发。我们的事件侦听器然后检索历史状态对象与之关联的URL,并提示“id”的值。

创建一个文件composer.json,然后填入如下语句,

$.scrollify("move","#name"); 

它是非常的简单和有趣,不是吗?

复制代码 代码如下:

以上代码可以直接滚动到#name的节点。

您可能感兴趣的文章:

  • ExtJS与PHP、MySQL实现存储的方法
  • javascript Ext JS 状态默认存储时间
  • javascript js cookie的存储,获取和删除
  • Node.js中调用mysql存储过程示例
  • 什么是cookie?js手动创建和存储cookie
  • js浏览器本地存储store.js介绍及应用
  • jsp使用cookie存储中文示例分享
  • 用JavaScript计算在UTF-8下存储字符串占用字节数
  • JavaScript笔记之数据属性和存储器属性
  • JSON复杂数据处理之Json树形结构数据转Java对象并存储到数据库的实现
  • js仿微博实现统计字符和本地存储功能
  • JavaScript实现基于Cookie的存储类实例
  • 总结JavaScript三种数据存储方式之间的区别

{
    "require": {
        "dnode/dnode": "0.2.0"
    }
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:jQuery的Scrollify插件实现滑动到页面下一节点,使

关键词: m.lom599.com