hDProcess.js文档浏览进度插件

hDProcess.js

介绍

以进度条的方式显示文档内容浏览进度的一款js插件。

兼容性

Chrome 3+
Firefox 2+
Safari 3.2+
Opera 10+
IE 7+

地址:Github

展示

用法

html

    <div id="container"></div>    

js

    var a=hProcess({
        id:"container",//容器元素id
        goalId:"content"//内容元素id，用于获取内容文档的高度。
    }).fixIE7();

css

本插件默认没有css样式，你可以自己修改样式。类名 .innerEl 就是 显示的进度条，你可以自己修改颜色，至于大小，直接修改绑定的容器元素的大小即可，进度条自动继承容器元素的高度宽度。

    #container{
        width: 100%;
        height: 3px;
        background-color: #f7f7f7;
    }
    .innerEl{
        background-color: #fb6d6d;
        height: 100%;
        width: 100%;
    }

API

moveTo(percent)

将进度条移动到指定位置,percent的值为0-1;

example

    var a=hProcess({
        id:"container",//容器元素id
        goalId:"content"//内容元素id，用于获取内容文档的高度。
    }).fixIE7();

    a.moveTo(0.5);//将进度条移动到50%位置

fixIE7()

用于兼容 ie7浏览器下的bug。需要兼容ie7时 调用。

具体可以参考github 里的 index.html

转载于:https://www.cnblogs.com/hlere/p/6826243.html