動態響應式進度條

該博客是展現對應https://download.csdn.net/download/it_java_shuai/12489375資源中示例的效果(窮到沒有積分下載其他的資源了,其他的資源積分實在是太高了。望各位諒解!)

調用方式:

                <div id="frame1">
			<div>進度條測試</div>
			<div class="jjjjj"></div>
		</div>
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/progress.js"></script>
		<script type="text/javascript">
			window.onresize = function() {
				$(".jjjjj").loadProgress({
					lineheight: 0.2,
					dianshu: 5
				});
				$(".jjjjj").setProgress(2);
			}
			$(".jjjjj").loadProgress({
				lineheight: 0.2,
				dianshu: 5
			});
			$(".jjjjj").setProgress(2);
		</script>

lineheight:線的高度,rem值

dianshu:節點的個數

效果:

腳本及示例下載地址:https://download.csdn.net/download/it_java_shuai/12489375

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章