jquery实现渐变色动画进度效果代码
代码语言:html
所属分类:进度条
代码描述:jquery实现渐变色动画进度效果代码,使用了gradientify插件
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html, body { width: 100%; height: 100%; margin: 0; } body { background: none; font-size: 14px; } h1 { width: 80%; margin: 0.67em auto; } .clear { clear: both; } .row { width: 80%; height: 30px; margin: 20px auto; } .row div { float: left; height: 30px; line-height: 30px; } .background { width: 80%; height: 30px; border: 1px solid #ccc; border-radius: 10px; background: #eee; margin: 0px 50px; overflow: hidden; } .progress { border-radius: 10px; overflow: hidden; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.gradientify.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.row').each(function() { $(this).find('.progress').animate({ width: $(this).find('.progress').attr('data-value') }, 6000).gradientify({ gradients: eval($(this).find('.progress').attr('data-color')), angle: '45deg', fps: '300', transition_time: '1' }); var num = $(this).find('.num').attr('data-value'); var that = $(this); setTimeout(function() { setNumTimer(1, num, that)}, 50); }); }); </script> </head> <body> <div class="row clear"> <div class="title"> 第一名 </div> <div class="background"> <div class="progress" data-value='90%' data-color="[{start:[255,250,240],stop:[255,255,0]},{start:[255,255,0],sto.........完整代码请登录后点击上方下载按钮下载查看
网友评论0