jquery实现模拟百分比进度条渐变效果代码
本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:
这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/
具体代码如下:
<html> <head> <title>jquery模拟百分比进度条</title> <script type='text/javascript' src='jquery1.3.2.js'></script> <style> #loading{ background:url(bak.png) 0 0 no-repeat; width:397px; height:49px;} #loading div{ background:url(pro.png) 0 0 no-repeat; line-height:49px;height:49px; text-align:right;} </style> <script type="text/javascript"> var progress_id ="loading"; function SetProgress(progress) { if (progress) { $("#" + progress_id +" > div").css("width",String(progress) + "%"); //控制#loading div宽度 $("#" + progress_id +"> div").html(String(progress) + "%"); //显示百分比 } } var i = 0; function doProgress() { if (i > 100) { $("#message").html("恭喜您,歌曲上传成功!").fadeIn("slow");//加载完毕提示 return; } if (i <= 100) { setTimeout("doProgress()",500); SetProgress(i); i++; } } $(document).ready(function() { doProgress(); }); </script> </head> <body> <div id="message"></div> <div id="loading"><div> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jquery将标签元素的高设为屏幕的百分比
html部分: <body> <div id="margin_box"></div> </body> jquery部分: <script> $(function(){ var percent =0.15; $("#margin_box").css("height",window.document.body.clientHeight*percent) }) </script>
-
基于jquery打造的百分比动态色彩条插件
以前没写过jquery插件,在开发这个时,写一下代码,又看一下jquery插件的定义(如何开发之类的东东),来来去去的. 之所以要写这个插件,主要是为了往后的项目中方便实现这类型的功能,在之前做问卷调查那个应用中,就用到这个来显示结果,但当时开发时并不用是插件的,一大堆代码,看也烦,用起来很麻烦(当时就调了一个上午). 还好,这个功能比较简单,正好合适新手写插件. 具体的效果如图: 这个也算是简单的比例图吧. 插件的具体的代码如下: 复制代码 代码如下: ; (function ($) { $.
-
jQuery实现的简单百分比进度条效果示例
本文实例讲述了jQuery实现的简单百分比进度条.分享给大家供大家参考,具体如下: 一.JS Code: <script type="text/javascript"> var progressId = "ProgressBarID"; function setProgressBar(progress) { if (progress) { $("#" + progressId + " > div").css(
-
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果 HTML结构: 复制代码 代码如下: <ul class="vote-box-list clearfix" id="appVoteBox"> <li class="vl-item" id="voteItem0" > <div class="vote-item-wrap"> <h4>A:</h4
-
jquery插件canvaspercent.js实现百分比圆饼效果
在仪表盘的任务增多同时,列表页的百分比圆环或圆饼也随之增多,于是顺手在仪表盘的基础上,封装了一个小小的jquery插件(jq-canvaspercent.js),暂且版本1.0吧,到以后业务的变化在对其进行功能拓展: 暂时性用于页面中有多处百分比圆环的效果处理,还是不错的. jq-canvaspercent.js代码比较简单,以下直接给出插件代码和几张截图: /* * canvaspercent 0.1 * Copyright:HeavyShell * Date: 2016-06-27 * 利用
-
jquery实现模拟百分比进度条渐变效果代码
本文实例讲述了jquery实现模拟百分比进度条渐变效果代码.分享给大家供大家参考,具体如下: 这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/ 具体代码如下: <html> <head> <title>jquery模拟百分比进度条</title> <script
-
jQuery实现可拖动进度条实例代码
html <div class="progress"> <div class="progress_bg"> <div class="progress_bar"></div> </div> <div class="progress_btn"></div> <div class="text">0%</div&g
-
jQuery多文件异步上传带进度条实例代码
先给大家展示下效果图: ///作者:柯锦 ///完成时间:2016.08.16 ///多文件异步上传带进度条 (function ($) { function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, // or 1000 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes)
-
jQuery实现html可联动的百分比进度条
最近需要一个HTML可以联动的百分比进度条,网上找了一下没有,自己手动实现了一个. 需要解决的问题,AB两个进度条需要按照百分比A+B=100%,A进度条可以拖动,B进度条联动,并且有进度颜色的变化.实现功能如下: HTML代码: <div class="percentage-container" > <div class="a-percentage" data-x='30'> <div class="a-percentage
-
jQuery实现进度条效果代码
在某些特定的场景下,应用进度条效果,可以提高网站的人性化程度,能够让用户能够掌握进度,增加对进度的耐心,否则可能直接导致关闭页面,从来导致网站流失用户,下面就是用过jQuery实现的进度效果代码. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam
-
使用Ajax实现简单的带百分比进度条实例
需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" borderco
-
bootstrap+jQuery实现的动态进度条功能示例
本文实例讲述了bootstrap+jQuery实现的动态进度条功能.分享给大家供大家参考,具体如下: 此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progress-bar从而实现基本的进度条. b.在外层<div>中加入class .progress-striped实现条纹进度条. c.在内层<div>加入class .progress-b
-
Android自定义View实现带数字的进度条实例代码
第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de
-
Linux下模拟实现进度条实例详解
Linux下模拟实现进度条 在Linux系统下模拟进度条,首先需要了解一些简单基础知识: 1.在Linux系统下,\r是回车符,\n是换行符,回车是行不变光标回到该行的起始位置,换行是跳转到下一行,但是光标位置不变: 2.C\C++的输入输出都有缓冲区,都为行缓冲,行刷新,通过回车换行刷新到I\O区: 3.1秒 = 1*10的三次方毫秒 = 1*10的6次方微秒 Linux下c代码实现: 编写Makefile: 代码运行结果: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
随机推荐
- 移动端WebApp隐藏地址栏的方法
- 利用Python爬取可用的代理IP
- javascript图片切换综合实例(循环切换、顺序切换)
- PHP微信开发用Cache 解决数据缓存
- php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
- PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
- php中ob函数缓冲机制深入理解
- python正则表达式判断字符串是否是全部小写示例
- MySQL里Create Index 能否创建主键 Primary Key
- js改变style样式和css样式的简单实例
- Python实现批量转换文件编码的方法
- js实现百度登录框鼠标拖拽效果
- jquery心形点赞关注效果的简单实现
- Apache服务器中.htaccess文件的实用配置示例集锦
- Spring MVC学习笔记之json格式的输入和输出
- JavaScript 序列化对象实现代码
- php版微信返回用户text输入的方法
- 详解mpvue实现对苹果X安全区域的适配
- vue移动端使用appClound拉起支付宝支付的实现方法
- pandas删除指定行详解