一款HTML进度条设计

最新推荐文章于 2024-07-19 15:32:49 发布

j_akill

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量4.3k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/j_akill/article/details/42804007

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

类似上面的效果，

就是当前的进度和百分比是一同向右滑动：

三个文件如下：

html：

<!--//-->
<!--//  Created by wangdan on 14-12-8.-->
<!--//  Copyright (c) 2014Ū wangdan. All rights reserved.-->

<!DOCTYPE html>

<html lang="en">
    
    <head>
        
         <meta charset="utf-8">
            
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
                
            <meta name="description" content="">
                    
            <meta name="viewport" content="width=device-width; initial-scale=1.0">
                        
            <link rel='stylesheet' type='text/css' href='common.css' />
                        
            <link rel='stylesheet' type='text/css' href='test.css' />
        
            <script type="text/javascript" src="common.js"></script>
                        
                        
                        
      </head>
    
    
    
    <body>
   <div class="empty">
   </div>
	 
       <div class="percentContainer">
		 <a class="percentText">0%</a>
	   </div>
	   
       <div class="trangle">
	   </div>
	   
		<div class="progressContainer">
			<div class="progressBar">
			</div>
		</div>
  
	
	        
    <script src="jquery-1.10.1.min.js"></script>
    <script src="idangerous.swiper.min.js"></script>   
    <script type="text/javascript" src="test.js"></script>

    </body>
    
</html>

css:<pre name="code" class="css">.empty{
height:50px;
}
.percentContainer{
position:absolute;
width:50px;
 top:50px; 
text-align:center;
height:20px;
border-radius:4px;
background:rgba(0,0,255,0.6);
border:1px solid;
}
.percentText{
color:white;
}
.trangle{
position:absolute;
top:70px;
width:3px;
height:8px;
background:rgba(0,255,255,1);
}
.progressContainer{
position:absolute;
top:78px;
width:200px;
height:3px;
background:rgba(255,255,255,1);
border:1px solid;
}
.progressBar{
position:absolute;
width:10px;
height:3px;
background:rgba(0,0,0,1);
}

js:

<pre name="code" class="javascript">var barWidth=200;
function getPercentContainer()
{
	return $(".percentContainer");
}

function getPercentText()
{
	return $(".percentText");
}

function getTrangle()
{
	return $(".trangle");
}
function getProgressBar()
{
	return $(".progressBar");
}

function setWidth(objParam,widthParam)
{
	objParam.css("width",widthParam);
}

function starAnimate()
{
  getPercentContainer().hide();
  getTrangle().hide();
}
function setLeftSpace(objParam,leftSpace)
{
	objParam.css("left",leftSpace);
}
function setWidth(objParam,widthParam)
{
	objParam.css("width",widthParam);
}

function setHeight(objParam,heightParam)
{
	objParam.css("height",heightParam);
}
function setRGB(objParam,gParam)
{
	objParam.css("background","rgba(0,"+gParam.toString()+",0,0.8)");
}
var j=0;

getTrangle().hide();
getPercentContainer().hide();
function changePercent()
{	
	j=j+1;
	if( j<=100)
	{
	getTrangle().fadeIn();
	getPercentContainer().fadeIn();

	getPercentText().text(j.toString()+'%');
	if(j*2>25 && j*2<175){
		
		setLeftSpace(getPercentContainer(),j*2-25);

	}
	setRGB(getPercentContainer(),j*2);
	setLeftSpace(getTrangle(),j*2);
	setWidth(getProgressBar(),j*2);
	}
	
	if(j >= 100)
	{
			getTrangle().fadeOut();
			getPercentContainer().fadeOut();
	}
}
setInterval("changePercent()",30);