环形进度条动态背景

<div>

<div class="circle_left">

<div class="clip_left"> </div>

</div>

<div class="circle_right">

<div class="clip_right"></div>

</div>

<div class="contentCircle" style="height:80px;padding-top:52px"><span>经验</span></div>

</div>

 

 

 

//获取一屏的高度

 

(function() {

var clientHeight = document.documentElement.clientHeight;

console.log(clientHeight);

$('.bannerTop').height(clientHeight - 70);

$('.platformStepContentDection>div').each(function() {

var timer;

$(this).mouseenter(function() {

 

//划过转圈效果

var s = 1

var that = $(this);

 

function test(s, that) {

if (s == 0) {

that.children('.circle_right').css({

'transform': 'rotate(0deg)',

"background": "#adeaff"

});

that.children('.circle_right').css({

'transform': 'rotate(0deg)',

"background": "#adeaff"

});

 

}

if (0 < s <= 25) {

that.children('.circle_right').css('transform', 'rotate(' + (s * 7.2) + 'deg)');

}

if (s > 25) {

that.children('.circle_right').css({

'transform': 'rotate(0deg)',

"background": "#35c9ff"

});

 

that.children('.circle_right').css('transform', 'rotate(' + ((s - 25) * 7.2) + 'deg)');

}

}

timer = setInterval(function() {

 

test(s, that);

s++;

if (s == 51) {

s = 0;

}

}, 20);

return timer;

});

$(this).mouseleave(function() {

clearInterval(timer);

$(this).children('.circle_right').css({

'transform': 'rotate(0deg)',

"background": "#adeaff"

});

$(this).children('.circle_right').css({

'transform': 'rotate(0deg)',

"background": "#adeaff"

});

});

})

 

})()

$(window).resize(function() {

var clientHeight = document.documentElement.clientHeight;

$('.bannerTop').height(clientHeight - 70);

console.log($('.bannerTop').height());

})