jQuery数字百分比加载特效代码下载


jQuery数字百分比加载特效代码下载
jQuery数字百分比加载特效代码下载以及数字百分比加载等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

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

3. HTML代码

<div class="loading-page">
	<div class="counter">
		<p>loading</p>
		<h1>0%</h1>
		<hr/>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
  var counter = 0;
  var c = 0;
  var i = setInterval(function(){
      $(".loading-page .counter h1").html(c + "%");
      $(".loading-page .counter hr").css("width", c + "%");
      //$(".loading-page .counter").css("background", "linear-gradient(to right, #f60d54 "+ c + "%,#0d0d0d "+ c + "%)");
    /*
    $(".loading-page .counter h1.color").css("width", c + "%");
    */
    counter++;
    c++;
    if(counter == 101) {
        clearInterval(i);
    }
  }, 50);
});
</script>

相关推荐

发表评论

相关文章