现在的位置: 首页 -> 前端学习 -> JS前端 -> jquery实现一个漂亮的进度条的效果

jquery实现一个漂亮的进度条的效果

2014-02-18 21:56 ⁄ 评论数 0 ⁄ 被浏览 11946 views+

jquery实现一个进度条的效果，或许在这里没有什么实际的作用，但是已经实现了进度条的部分原理，前端是怎么实现那种进度效果的。


效果演示：


jquery进度条原理

效果1


jquery进度条原理

效果2


演示地址：https://www.daixiaorui.com/Public/demo/js/progressBar.html 


js进度条实现源码：


<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery实现进度条</title>

<style>

.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}

#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}

</style>

<script type="text/jscript" src="jquery.min.js"></script>

<script type="text/javascript">

function progressBar(){

//初始化js进度条

$("#bar").css("width","0px");

//进度条的速度，越小越快

var speed = 20;

bar = setInterval(function(){

nowWidth = parseInt($("#bar").width());

//宽度要不能大于进度条的总宽度

if(nowWidth<=200){

barWidth = (nowWidth + 1)+"px";

$("#bar").css("width",barWidth);

}else{

//进度条读满后，停止

clearInterval(bar);

}

},speed);

}

</script>

</head>


<body>

<input type="button" value="开始" onclick="progressBar()" />

<div class="progressBar"><div id="bar"></div></div>

</body>

</html>

 

文章出自：https://www.daixiaorui.com/read/70.html 本站所有文章，除注明出处外皆为原创，转载请注明本文地址，版权所有。

您可能还会对这些文章感兴趣！

  1. select在另一个select结果集中动态的选择添加和删除值
  2. jquery控制商品数量加减改变价格，只能输入数字
  3. js弹出一个窗口后，后面的层不可操作
  4. js平滑滚动到顶部,底部,指定地方
  5. js&jquery验证邮箱和手机号是否正确范例
  6. js双日历选择一段范围内的日期（优化版）
  7. js弹出层弹出微信扫描的效果
  8. js双日历,可扩展,支持自定义时间段内选择
php源码，小程序
php源码，小程序
php源码，小程序
php源码，小程序

目前有 0 条评论  @我要评论

    您的每一个评论都是对我的一份支持

     博客二维码

    昵称 *

    邮箱 *

     

    返回首页

    申明：本站文字除标明出处外皆为作者原创，转载请注明原文链接。
    Copyright © 2013 代潇瑞博客-专注于PHP学习  粤ICP备13071969号-1