最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery进度条带flash动画效果的jquery轻量级进度条

来源:http://www.erdangjiade.com/js/1160.html 二当家的 2017-02-18 17:02浏览(770)

jquery进度条带flash动画效果的jquery轻量级进度条效果实现源码下载

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery进度条带flash动画效果的jquery轻量级进度条
分类:其它特效 > 进度条 难易:入门级
查看演示 下载资源: 6

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
<div class="votebox">
	<h2>票选最给力的网页特效</h2>
	<ul>
		<li><span class="barline-01"></span>最大值</li>
		<li><span class="barline-02"></span>一般值</li>
		<li><span class="barline-03"></span>最小值</li>
	</ul>
	<dl class="barbox">
		<dt><a href="http://www.erdangjiade.com/">jquery 特效</a></dt>
		<dd class="barline">
			<div divindex="0" id="chartSlide_0" w="70" style="width:0px;" class="charts"></div>
		</dd>
		<dd class="last">70%</dd>
	</dl>
	<dl class="barbox">
		<dt><a href="http://www.erdangjiade.com/">javascript 特效</a></dt>
		<dd class="barline">
			<div divindex="1" id="chartSlide_1" w="50" style="width:0px;" class="charts"></div>
		</dd>
		<dd class="last">50%</dd>

	</dl>
	<dl class="barbox">
		<dt><a href="http://www.erdangjiade.com/">CSS 特效</a></dt>
		<dd class="barline">
			<div divindex="2" id="chartSlide_2" w="20" style="width:0px;" class="charts"></div>
		</dd>
		<dd class="last">20%</dd>
	</dl>

	<dl class="barbox">
		<dt><a href="http://www.erdangjiade.com/">HTML5 特效</a></dt>
		<dd class="barline">
			<div divindex="3" id="chartSlide_3" w="10" style="width:0px;" class="charts"></div>
		</dd>
		<dd class="last">10%</dd>
	</dl>
	
	<div class="votebtn"><a href="javascript:void(0);">前往投票</a><a href="javascript:void(0);">返回</a></div>
	
</div><!--votebox end-->
function animate(){
	var max="barred";
	var middle="baryellow";
	var min="barblue";	
	
	var maxValue=0;
	var minValue=0;
	
	var maxIndex=0;
	var minIndex=0;
	
	$(".charts").each(function(i,item){
		var a=parseInt($(item).attr("w"));
	
		if(i==0){
			minValue=a;
			minIndex=i;
		}
	
		if(a>maxValue){
			maxValue=a;
			maxIndex=i;
		}else if(a<minValue){
			minValue=a;
			minIndex=i;
		}
	
	});
	
	$(".charts").each(function(i,item){
		var addStyle="";
		var divindex=parseInt($(item).attr("divindex"));
		if(divindex==maxIndex){
			addStyle=max;
		}else if(divindex==minIndex){
			addStyle=min;
		}else{
			addStyle=middle;
		}
	
		$(item).addClass(addStyle);
		var a=$(item).attr("w");
		$(item).animate({
			width: a+"%"
		},1000);
	});
	
}
animate();
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1160.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2