zoukankan      html  css  js  c++  java
  • 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{
             100%;
            height: 3px;
            background-color: #f7f7f7;
        }
        .innerEl{
            background-color: #fb6d6d;
            height: 100%;
             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

  • 相关阅读:
    1-6.webpack对字体图标和图片的处理
    1-5.Webpack对Html模板处理
    1-4.Webpack对样式的处理
    1-3.Webpack对脚本的处理
    1-2.Webpack初始化
    1-1.mmall电商项目搭建
    Java 随心笔记11
    Java 随心笔记10
    Java 随心笔记9
    Java 随心笔记8
  • 原文地址:https://www.cnblogs.com/hlere/p/6826243.html
Copyright © 2011-2022 走看看