<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/radialIndicator.js"></script>
<style>
.prg-cont{
width: 100%;
height: 500px;
text-align: center;
margin: 0 auto;
margin-top: 200px;
}
</style>
</head>
<body>
<div class="prg-cont" id="indicatorContainer"></div>
<script>
var radialObj = $('#indicatorContainer').radialIndicator({
barColor: {
0: '#FF0000',
33: '#FFFF00',
66: '#0066FF',
100: '#33CC33'
},
percentage: true
}).data('radialIndicator');
$(".prg-cont canvas").hover(function(){
radialObj.animate(100);
},function(){
radialObj.animate(0);
})
</script>
</body>
</html>
效果 ：
鼠标移入：0%-->100%;
123.jpg
鼠标移出：100%-->0%;
网友评论