本地存储和Stellar插件

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，
同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，
HTML5规范提出了相关解决方案。

• 特性
  
  • 设置、读取方便
  • 容量较大，sessionStorage约5M、localStorage约20M
  • 只能存储字符串，可以将对象JSON.stringify() 编码后存储
• window.sessionStorage
  
  • 生命周期为关闭浏览器窗口
  • 在同一个窗口(页面)下数据可以共享
• window.localStorage
  
  • 永久生效，除非手动删除（服务器方式访问然后清除缓存）
  • 可以多窗口（页面）共享
• 方法
  
  • setItem(key, value) 设置存储内容
  • getItem(key) 读取存储内容
  • removeItem(key) 删除键值为key的存储内容
  • clear() 清空所有存储内容

《QQ TIM》案例

Stellar插件

• 描述
  
  • 视差滚动（Parallax Scrolling）指网页滚动过程中，
    多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术
    主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。
    这种效果可以给网站一个很好的补充。
• 特性
  
  • 视差滚动效果酷炫，适合于个性展示的场合。
  • 视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。
  • 视差滚动容易迷航，需要具备较强的导航功能。

• 原理

  • 传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，
    而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。
    有的时候也可以加上一些透明度、大小的动画来优化显示。利用background-attachment属性实现。

• 使用步骤

  • 引用文件
    ~html
    
    
    ~

  • html结构

        <div class="content" id="content1">
            <p>TEXT HERE</p>
        </div>
        <div class="content" id="content2">
            <p>TEXT HERE</p>
        </div>
        <div class="content" id="content3" data-stellar-background-ratio="0.5">
            <p>TEXT HERE</p>
        </div>
        <div class="content" id="content4" data-stellar-background-ratio="0.5">
            <p>TEXT HERE</p>
        </div>
        <div class="content" id="content5" data-stellar-background-ratio="0.5">
            <p>TEXT HERE</p>
        </div>
        <div class="content" id="content6" data-stellar-background-ratio="0.5">
            <p>TEXT HERE</p>
        </div> 

  • 基本样式
    ~~~css
    .content {
    background-attachment: fixed;
    height: 400px;
    }

    content1 {

    background-image: url("..");
    

    }

    content2 {

    background-image: url("..");
    

    }

    content3 {

    background-image: url("..");
    

    }

    content4 {

    background-image: url("..");
    

    }

    content5 {

    background-image: url("..");
    

    }

    content6 {

    background-image: url("..");
    

    }
    ~~~

  • js初始化
    ~javascript
    $.stellar({
    horizontalScrolling: false,
    responsive: true
    });
    ~
• 参数解释

名称	说明
horizontalScrolling 和 verticalScrolling	该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true
responsive	该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false
hideDistantElements	该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false
data-stellar-ratio=”2”	定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。
data-stellar-background-ratio	该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置

完成视觉滚动差页面开发

• 模块一: 导航(nav)
• 模块二: 宣传(banner)
• 模块三: 语音聊天(sound)
• 模块四: 文件传输(file)
• 模块五: 兴趣部落(interest)
• 模块六: 底部(footer)