js动态状态栏

最新推荐文章于 2023-12-04 15:08:03 发布

bei_fang_du_lang

最新推荐文章于 2023-12-04 15:08:03 发布

阅读量636

点赞数

分类专栏：随笔文章标签： js jquery animate

本文链接：https://blog.csdn.net/bei_fang_du_lang/article/details/44872881

版权

随笔专栏收录该内容

67 篇文章 0 订阅

订阅专栏

一、最近需要实现一个动态状态栏的小插件。自己写了个很简单的，虽然不是很强大，但是很简单。

<!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> 
<title>图片实现进度条</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 
<body> 
<div id="play_progress" style="position:relative;">
<div id="play_progress_bg" style="position:absolute; width:360px; height:15px; z-index:2;background-image:url(progressbar_bg.png);background-repeat:no-repeat;"></div>
<div id="play_progress_bar" style="position:absolute;  width:0px; height:11px; z-index:3;background-image:url(progressbar.png);background-repeat:no-repeat;"></div>
</div>
</body> 
 <script src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
  $(document).ready(moveState(60));
  function moveState(score) {
  $("#play_progress_bar").animate({width:score*3}, 5000);
  }
  </script>
</html>

只需要有两个图片就可以完成功能了。

二、又找了网上的相关代码，收获如下。

1、利用setInterval()函数和clearInterval()函数去动态画。

2、利用setTimeout()函数和clearTimeout()函数去调节图片显示宽度，而且会添加js特效，如文字效果等。

我将资源也上传上来了。在我的资源中可以下载。

bei_fang_du_lang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态状态栏

最近需要实现一个动态状态栏的小插件。自己写了个很简单的，虽然不是很强大，但是很简单。图片实现进度条 $(document).ready(moveState(60)); function moveState(score) { $("#play_progress_bar").animate({width:s
复制链接

扫一扫