OUR SERVER

直接使用代码

图片素材

无

css代码

   <script src="/Public/images/demo/index4/circleChart.js"></script>
<script src="/Public/images/demo/index4/jquery.waypoints.min.js"></script>

<style type="text/css">
/*公用标题*/
#index_title h1{ text-align:center;}
#index_title .line{ width:80px; border-top:5px solid #f00; margin:0 auto; height:5px;}
#index_title h2{ text-align:center}
#fuwu img{  margin-top:10px;}
#fuwu  p{ line-height:40px}
@media (max-width:760px){
  #fuwu img {margin-top: -6px;}
}
</style>

HTML+JS代码

  
  <div class="container" id="fuwu">
    <div id="index_title">
      <h1>OUR SERVER</h1>
      <P class="line">&nbsp;</P>
      <h2>服务</h2>
      <div class="clear"></div>
    </div>
    <div class="row pad-y50 texiao">
      <div class="col-md-2 col-xs-6">
        <div class="circleChart" id="1"></div>
        <p class="text-center">产品外观设计</p>
      </div>
      <div class="col-md-2 col-xs-6">
        <div class="circleChart" id="2"></div>
        <p class="text-center">产品结构设计</p>
      </div>
      <div class="col-md-2 col-xs-6">
        <div class="circleChart" id="3"></div>
        <p class="text-center">3D打印</p>
      </div>
      <div class="col-md-2 col-xs-6">
        <div class="circleChart" id="4"></div>
        <p class="text-center">产品手板制作</p>
      </div>
      <div class="col-md-2 col-xs-6">
        <div class="circleChart" id="5"></div>
        <p class="text-center">量产支持</p>
      </div>
      <div class="col-md-2 col-xs-6">
        <div class="circleChart" id="6"></div>
        <p class="text-center">全产业链信息支持</p>
      </div>
      <div class="clear"></div>
    </div>
  </div>

  <script>
    $(".texiao").waypoint(
      function () {
        yuan();
      },
      { offset: 600 }
    );
    if(document.body.clientWidth<760){
      console.log('1')
      var now_size = 130
    }else{
      var now_size = 160
    }
    function yuan() {
      $(".circleChart#1").circleChart({
        size: now_size,
        value: 100,
        widthRatio: 0.05, //圆环宽度
        color: "#e60014",
        backgroundColor: "#e6e6e6",
        text: 0,
        onDraw: function (el, circle) {
          circle.text(
            " <img src='/Public/images/demo/index4/fuwu3.png' class='center-block img-responsive'/>"
          );
        }
      });
      $(".circleChart#2").circleChart({
        size: now_size,
        value: 100,
        widthRatio: 0.05,
        color: "#e60014",
        backgroundColor: "#e6e6e6",
        text: 0,
        onDraw: function (el, circle) {
          circle.text(
            " <img src='/Public/images/demo/index4/fuwu2.png' class='center-block img-responsive''/>"
          );
        }
      });
      $(".circleChart#3").circleChart({
        size: now_size,
        value: 100,
        widthRatio: 0.05,
        color: "#e60014",
        backgroundColor: "#e6e6e6",
        text: 0,
        onDraw: function (el, circle) {
          circle.text(
            " <img src='/Public/images/demo/index4/fuwu1.png' class='center-block'/>"
          );
        }
      });
      $(".circleChart#4").circleChart({
        size: now_size,
        value: 100,
        widthRatio: 0.05,
        color: "#e60014",
        backgroundColor: "#e6e6e6",
        text: 0,
        onDraw: function (el, circle) {
          circle.text(
            " <img src='/Public/images/demo/index4/fuwu6.png' class='center-block'/>"
          );
        }
      });
      $(".circleChart#5").circleChart({
        size: now_size,
        value: 100,
        widthRatio: 0.05,
        color: "#e60014",
        backgroundColor: "#e6e6e6",
        text: 0,
        onDraw: function (el, circle) {
          circle.text(
            " <img src='/Public/images/demo/index4/fuwu4.png' class='center-block'/>"
          );
        }
      });
      $(".circleChart#6").circleChart({
        size: now_size,
        value: 100,
        widthRatio: 0.05,
        color: "#e60014",
        backgroundColor: "#e6e6e6",
        text: 0,
        onDraw: function (el, circle) {
          circle.text(
            " <img src='/Public/images/demo/index4/fuwu5.png' class='center-block'/>"
          );
        }
      });
    }
  </script>