jquery文章阅读时间进度条预览例子

效果如图下，

文章阅读时间进度条预览例子-jquery步骤进度条例子">
在玛蜂窝发现这个提示功能挺好的，  参考这个思路写了一个功能.

HTML代码

 代码如下 复制代码

<DIV id=head></DIV>
 <DIV id=box>
  <DIV id=boxbar>
   <DIV style="WIDTH: 1%" id=bar class=red></DIV>
  </DIV>
 </DIV>
 
 <DIV id=doc>
 <P>1</P><P>1</P><P>www.111cn.net</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P><P>1</P>
 </DIV> 

 <DIV class=pl>  
  <P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P><P>2</P>
 </DIV>

CSS代码

 代码如下 复制代码

*{margin:0; padding: 0;}
  body{
   padding: 10px;
  }
  #box{
   width:500px;
   position: fixed;
   height: 30px;
   top:0;
   display: none;
  }
  #boxbar{
   position: relative;
   background: #ccc;height: 30px;
  }
  #boxbar div{
   position: absolute;
  }
  .red{background: red; height: 15px; z-index: 2;  top: 0; width:1%;}

  #head{
   height: 50px;
  }
  p{line-height: 4em;}

JS代码

 

 代码如下 复制代码

$(function() {

   //游记内容高度
   var docH = $('#doc').outerHeight()">endY ){
     $('#box').hide();            
    }else{
     $('#box').show();
     var barP = ( (scroll_top - beginY)  / docH )* 100 + '%'; //beginY=从初始位置
     $('#bar').css({width:barP})     
    }
   }

            $(window).scroll(function () {
    var scroll_top = $(this).scrollTop();
    //todo 需做节流处理
    showTools(scroll_top);
            });

  });

只是简单DEOM， 待组件化处理.

时间： 2024-09-27 16:51:40

jquery文章阅读时间进度条预览例子的相关文章

基于jquery实现图片上传本地预览功能_jquery

当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦.一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.UR

jquery实现模拟百分比进度条渐变效果代码_jquery

本文实例讲述了jquery实现模拟百分比进度条渐变效果代码.分享给大家供大家参考,具体如下: 这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/ 具体代码如下: <html> <head> <title>jquery模拟百分比进度条</title> <script

jquery实现加载进度条提示效果_jquery

本文实例讲述了jquery实现加载进度条提示效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script type="text/javascript" src="http://lib.sinaapp.co

jquery实现图片上传之前预览的方法_jquery

本文实例讲述了jquery实现图片上传之前预览的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码_jquery

本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

jquery Bootstrap组件实现进度条示例代码

Bootstrap组件 .progress--指定div包裹进度条组件: .progress-bar--设置div为进度条样式: .progress-bar-info..progress-bar-warning..progress-bar-success..progress-bar-danger--设置进度条的情境效果: .pregress-bar-striped--设置进度条具有条纹效果: .active--可设置进度条的条纹处于动画状态: 属性aria-valuemin--设置进度条的最小值

jquery 图片上传按比例预览插件集合_jquery

js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片

jquery.imgareaselect实现图片的本地预览和选择截取实现代码

第一还是要引用jquery,接着引用下载好的 jquery.imgareaselect.pack.js 文件和 imgareaselect-default.css 样式文件. 接着写一些元素标签  代码如下 复制代码  <img id="ferret" src="" alt="It's coming right for us!" title="It's coming right for us!"         styl

thinkphp jquery实现图片上传和预览效果_php技巧

先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte