文本数字增加

作者：
发布时间：0000-00-00 00:00:00
浏览次数：291

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本数字增加</title>
  <meta name="renderer" content="webkit">
  <meta name="format-detection" content="telephone=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    
  <link rel="stylesheet" href="https://h5.org.cn/css/cui.css" />
  <link rel="stylesheet" href="https://h5.org.cn/css/cui-rel.css" />
  <script type="text/javascript" src="https://h5.org.cn/js/jquery.js"></script>
    
    <style>
      body{overflow-x: hidden;}
      .wp{width: 90%;margin: 0 auto;}
    
.ul-list1{
    overflow: hidden;
    margin: 0 -10px;
}
.ul-list1 li{
    float: left;
    width: 25%;
    padding: 10px;
    overflow: hidden;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.ul-list1 .title{
    float: left;
    color: #F08200;
    font-size: 30px;
    text-align: center;
    width: 76px;
    height: 102px;
    line-height: 102px;
    border: 1px solid #F08200;
    overflow: hidden;
    margin-right: 15px;
}
.ul-list1 .title em{
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
    margin-top: -14px;
}
.ul-list1 .txt{
    color: #444;
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    position: relative;
}
.ul-list1 .number{
    color: #F08200;
    line-height: 45px;
    overflow: hidden;
    margin-bottom: 5px;
}
.ul-list1 .number span{
    font-size: 44px;
    font-family: 'Arial';
    font-weight: bold;
}
.ul-list1 .number em{
    font-size: 28px;
    line-height: 1.5;
    display: inline-block;
    vertical-align: top;
    margin-top: 6px;
    margin-left: 5px;
}
@media only screen and (max-width: 1900px){
    .ul-list1 .title{font-size: 1.5625vw;}
    .ul-list1 .number span{font-size: 2.291vw;}
}
@media only screen and (max-width: 1440px){
    .ul-list1 .title{font-size: 20px;}
    .ul-list1 .number span{font-size: 30px;}
}
@media only screen and (max-width: 1200px){
    .ul-list1 .title{font-size: 18px;}
    .ul-list1 .txt{font-size: 12px;}
    .ul-list1 .txt p br{display: none;}
}
@media only screen and (max-width: 960px){
    .ul-list1 li{width: 50%;}
}
@media only screen and (max-width: 750px){
    .ul-list1 li{float: none;width: auto;}
    .ul-list1 .title{font-size: 16px;width: 40px;height: 60px;line-height: 60px;margin-right: 8px;}
    .ul-list1 .number{line-height: 30px;margin-bottom: 0;}
    .ul-list1 .number span{font-size: 20px;}
    .ul-list1 .number em{margin: 0;font-size: 12px;}
}

</style>
</head>
<body>
   <div class="wp">
     
     <ul class="ul-list1">
                <li>
                    <h3 class="title"><em>美国</em></h3>
                    <div class="txt">
                        <p class="number"><span class="counter" data-from="0" data-to="15000">15000</span><em>+</em></p>
                        <p class="detail">年均服务1.5万人次出游 <br>产品服务好评均领先市场 <br>所有产品保证无强制自费</p>
                    </div>
                </li>
                <li>
                    <h3 class="title"><em>加拿大</em></h3>
                    <div class="txt">
                        <p class="number"><span class="counter" data-from="0" data-to="3000">3000</span><em>+</em></p>
                        <p class="detail">2018年服务3000人次出游 <br>加拿大ADSP送签资质 <br>7天快签+通过率95%</p>
                    </div>
                </li>
                <li>
                    <h3 class="title"><em>单团定制</em></h3>
                    <div class="txt">
                        <p class="number"><span class="counter" data-from="0" data-to="5000">5000</span><em>+</em></p>
                        <p class="detail">2018年服务5000人次出游 <br>强大的资源支撑保障 <br>灵活的组合搭配方案</p>
                    </div>
                </li>
                <li>
                    <h3 class="title"><em>拉美</em></h3>
                    <div class="txt">
                        <p class="number"><span class="counter" data-from="0" data-to="2.5">2.5</span><em>+</em></p>
                        <p class="detail">年均服务1.5万人次出游 <br>产品服务好评均领先市场 <br>所有产品保证无强制自费</p>
                    </div>
                </li>
            </ul>
     <script src="https://cdn.bootcss.com/waypoints/4.0.1/jquery.waypoints.js"></script>
     <script src="https://cdn.bootcss.com/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
        <script>
        $('.counter').countTo();
        </script>
     
   </div>
</body>
</html>

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏