jquery实现带环形图表结果的投票效果代码-html代码-BFW代码库

jquery实现带环形图表结果的投票效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现带环形图表结果的投票效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body{
    padding: 120px;
}
.surveyDoubleHeader{
    font-family: "Segoe WP";
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
}

.surveyDoubleContainer{
    background-color: #EAEDF4;
    height: 135px;
    position: relative;
    width: 535px;
}

#surveyDoubleAnswerCenterPercent{
    color: #333333;
    font-family: "Segoe WP";
    font-size: 20px;
    margin: auto;
    position: relative;
    padding-top: 53px;
    text-align: center;
    z-index: 100;
}

#surveyDoubleAnswerLeft{  
    background-color: #cc0000;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: "Segoe UI";
    font-size: 18px;
    height: 43px;
    left: 35px;
    text-align: center;
    width: 114px; 
    position: absolute;
    top: 50px;
}

#surveyDoubleAnswerCenter{ 
    height: 135px;
    margin: auto;
    width: 150px;
}

#surveyDoubleAnswerCenterBorderWhite{
    background-color: white;
    border-radius: 75px;
    height: 150px;
    width: 150px;
    position: absolute;
    bottom: -8px;
}

#surveyDoubleAnswerCenterProgressRing{
    background-color: #D7DAE3;
    border-radius: 65px;
    height: 130px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 130px;
}

#surveyDoubleAnswerCenterProgressFill50{
    background-color: #CC0000;
    border-radius: 65px 0px 0px 65px;
    height: 128px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 64px;
    width: 64px; 
}

#surveyDoubleAnswerCenterProgressFill100{
    background-color: #CC0000;
    border-radius: 65px 0px 0px 65px;
    height: 128px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 64px;
    width: 64px; 
}

#surveyDoubleAnswerCenterProgressHide{
    background-color: #D7DAE3;
    border-radius: 65px 0px 0px 65px;
    height: 130px;
    position: absolute;
    width: 66px;
}

#surveyDoubleAnswerCenterBorderCenter{
    background-color: #EAEBF0;
    border-radius: 45px;
    height: 90px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 90px;
}

#surveyDoubleAnswerRight{
    background-color: #cc0000;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: "Segoe UI";
    font-size: 18px;
    height: 43px;
    text-align: center;
    width: 114px; 
    position: absolute;
    right: 35px;
    top: 50px;
}

.surveyDoubleAnswerText{
    position: relative;
    top: 10px;
}
</style>


  
</head>

<body >
  <div class="survey">
  <div cl.........完整代码请登录后点击上方下载按钮下载查看