资讯专栏INFORMATION COLUMN

html5之svg

Salamander / 1622人阅读

HTML5之svg
矢量图,缩放不变形。
1. 绘制基础 1.1标签绘制



    
    svg基础




   








    

1.2 js绘制



    
    demo


    

    

1.3 path绘制



    
    svg


    
        
        

        
        
        
        
        
       
       
        

        
        
        
        
        
        
    


1.4 文本绘制



    
    svg


    
        SVGA文本插入
        
    

2.动画基础 2.1 直线动画



    
    svg动画


    
        
            
             
        
    


2.2 弧线动画



    
    svg动画


    
        
            
        
    

2.3 轨迹动画



    
    svg动画


    
        
            
        
            
                
            
        
        
    


2.4 文本动画



    
    svg


    
        
            
                
            
        
        

        ABCDEFGHIJKLMNOPQRSTUVWXYZ
        
    

    

2.5 动画综合练习
vector.js
(function(){
            function Vector(x,y){
                this.x = x || 0;
                this.y = y || 0;
            }
            Vector.prototype = {
                constructor:Vector,
                square:function(){
                    return this.x * this.x + this.y * this.y; 
                },
                length:function(){
                    return Math.sqrt(this.square()); 
                },
                add:function(q){
                    return new Vector(this.x + q.x,this.y+q.y); 
                },
                minus:function(q){
                    return new Vector(this.x - q.x,this.y-q.y);  
                },
                multipy:function(scale){
                    return new Vector(this.x*scale,this.y*scale);  
                },
                normalize:function(length){
                    if(length === undefined){
                        length = 1;
                    }
                    return this.multipy(length / this.length());
                }
            };
            Vector.fromPoints = function(p1,p2){
                return new Vector(p2.x - p1.x, p2.y - p1.y);
            };
            window.Vector = Vector;
        })();
index.html



    
    svg动画
    


    
        
    
    
    
    


3.图案动画




  
  图案处理/title>
  <style>
    html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          background: #001122;
          line-height: 0;
          font-size: 0;
        }
    </style>
</head>
<body>
  <svg id="svg" width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice">
    <defs>
      <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon>
    </defs>
    
    <g id="star-group"></g>
    <g id="moon-group">
      <mask id="moon-mask">
        <circle cx="-250" cy="-150" r="100" fill="white"></circle>
        <circle cx="-200" cy="-200" r="100" fill="black"></circle>
      </mask>
      <circle cx="-250" cy="-150" r="100" fill="white" mask="url(#moon-mask)"></circle>
    </g>
    <g id="light-tower" transform="translate(250,0)">
      <defs>
        <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#999"></stop>
          <stop offset="1" stop-color="#333"></stop>
        </linearGradient>
        <radialGradient id="light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stop-color="rgba(255,255,255,.8)"></stop>
          <stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
        </radialGradient>
        <clipPath id="light-mask">
          <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="7s" repeatCount="indefinite"></animateTransform>
          </polygon>
          <circle cx="0" cy="0" r="2"></circle>
        </clipPath>
      </defs>
      <polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
      <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-mask)"></ellipse>
      
    </g>
  </svg>


  <script>
      
    var paper = document.getElementById("svg");
    var SVG_NS = "http://www.w3.org/2000/svg";
    var XLINK_NS = "http://www.w3.org/1999/xlink";
    
    renderStar();
    
    function use(origin) {
      var _use = document.createElementNS(SVG_NS, "use");
      _use.setAttributeNS(XLINK_NS, "xlink:href", "#" + origin.id);
      return _use;
    }
    
    function random (min, max) {
      return min + (max - min) * Math.random();
    }
    
    function renderStar() {
      var starRef = document.getElementById("star");
      var starGroup = document.getElementById("star-group");
      var starCount = 500;
      while(starCount--){
        star = use(starRef);
        star.setAttribute("opacity", random(0.1, 0.4));
        star.setAttribute("transform", "translate(" + random(-400, 400) + "," + random(-300, 50) + ")" + " scale(" + random(0.1, 0.6) + ")");
        starGroup.appendChild(star);
      }
    }
  </script>
</body>
</html></pre>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000019115973");</script></p>
<p><b>这篇是对慕、课、网svg教程的笔记,链接贴在下面,大家可以去看看:</b></p>
<p>走进SVG:https://www.imooc.com/learn/143</p>           
               
                                           
                       
                 </div>
            
                     <div class="mt-64 tags-seach" >
                 <div class="tags-info">
                                                                                                                    
                         <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/product/uhost.html">云服务器</a>
                                             
                         <a style="width:120px;" title="混合云" href="https://www.ucloud.cn/site/product/uhybrid.html">混合云</a>
                                                                                                                                                 
                                      
                     
                    
                                                                                               <a style="width:120px;" title="html5新特性之webrtc" href="https://www.ucloud.cn/yun/tag/html5xintexingzhiwebrtc/">html5新特性之webrtc</a>
                                                                                                           <a style="width:120px;" title="SVG" href="https://www.ucloud.cn/yun/tag/SVG/">SVG</a>
                                                                                                           <a style="width:120px;" title="_svg" href="https://www.ucloud.cn/yun/tag/_svg/">_svg</a>
                                                                                                           <a style="width:120px;" title="svg过渡" href="https://www.ucloud.cn/yun/tag/svgguodu/">svg过渡</a>
                                                         
                 </div>
               
              </div>
             
               <div class="entry-copyright mb-30">
                   <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p>
                 
                   <p>转载请注明本文地址:https://www.ucloud.cn/yun/109381.html</p>
               </div>
                      
               <ul class="pre-next-page">
                 
                                  <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/109380.html">上一篇:基于 Github API 的图床 Chrome 插件开发全纪录</a></li>  
                                                
                                       <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/109382.html">下一篇:html5之canvas</a></li>
                                  </ul>
              </div>
              <div class="about_topicone-mid">
                <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3>
                <ul class="com_white-left-mid atricle-list-box">
                             
                                                                    <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/55103.html"><b><em>HTML5</em><em>之</em>图形绘制技术(Canvas Vs <em>SVG</em>)</b></a></h2>
                                                     <p class="ellipsis2 good">摘要:中的图形绘制技术和是中主要的图形技术,前者提供画布标签和绘制,后者是一整套独立的矢量图形语言,成为标准已经有十多年至今,总的来说,技术较新,从很小众发展到广泛接受,注重栅格图像处理,则历史悠久,很早就成为国际标准,复杂,发展缓慢近十年没有大

HTML5中的2D图形绘制技术

Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-402.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/04/small_000000402.jpg" alt=""><span class="layui-hide64">Lowky</span></a>
                                    <time datetime="">2019-08-02 17:59</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/59287.html"><b><em>html5</em><em>之</em><em>svg</em></b></a></h2>
                                                     <p class="ellipsis2 good">HTML5之svg
矢量图,缩放不变形。
1. 绘制基础
1.1标签绘制



    
    svg基础




   








    


showImg(https://segmentfault.com/img/remote/1460000019115964);
1.2 js绘制



    
    demo


    

    

    
        var SV...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-1269.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/12/small_000001269.jpg" alt=""><span class="layui-hide64">Bowman_han</span></a>
                                    <time datetime="">2019-08-05 16:56</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/58010.html"><b><em>HTML5</em> <em>之</em> <em>SVG</em></b></a></h2>
                                                     <p class="ellipsis2 good">摘要:使用一个控制点的贝塞尔曲线叫做二次方贝塞尔曲线,使用两个控制点的贝塞尔曲线叫做三次方贝塞尔曲线。组内的所有元素都会继承标记上的所有属性。

SVG
总结的 svg 知识,方便以后复习查看 ~ ~
SVG是什么
SVG 表示可缩放矢量图SVG 用来定义WEB上使用的矢量图SVG 用XML格式定义矢量图SVG 在缩放时不会损失任何的图片质量SVG 文件里的所有元素和属性都可以运用动画效果SV...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-336.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000336.jpg" alt=""><span class="layui-hide64">CODING</span></a>
                                    <time datetime="">2019-08-05 14:26</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/55532.html"><b>教你五分钟入门使用<em>html5</em> <em>svg</em>绘制图形</b></a></h2>
                                                     <p class="ellipsis2 good">摘要:我在工作中用不到绘图,所以我是个小菜鸟。是一种使用描述图形的语言。基于,这意味着中的每个元素都是可用的。您可以为某个元素附加事件处理器。在中,每个被绘制的图形均被视为对象。如果对象的属性发生变化,那么浏览器能够自动重现图形。

跟着步骤学习,耐心点好么,不要只看图不看文字,只看图5天都学不会。我在工作中用不到h5绘图,所以我是个小菜鸟。但我始终有一种迷之信念,任何已经存在的东西学一下就会...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-1235.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/12/small_000001235.jpg" alt=""><span class="layui-hide64">ybak</span></a>
                                    <time datetime="">2019-08-05 10:01</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/55376.html"><b>基于<em>HTML5</em>的Web SCADA工控移动应用</b></a></h2>
                                                     <p class="ellipsis2 good">摘要:在电力油田燃气供水管网等工业自动化领域的概念已经提出了多年,早先年的前端技术大部分还是基于甚至这样的重客户端方案,在流行前和算是真正纯种方案也是有不少应用,近些年随着的流行,加上移动终端对支持的普及,越来越多新项目开始采用真正纯的方案,更具

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Sil...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-118.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000118.jpg" alt=""><span class="layui-hide64">kk_miles</span></a>
                                    <time datetime="">2019-08-02 18:27</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                           
                </ul>
              </div>
              
               <div class="topicone-box-wangeditor">
                  
                  <h3 class="top-com-title mb-64"><span>发表评论</span></h3>
                   <div class="xcp-publish-main flex_box_zd">
                                      
                      <div class="unlogin-pinglun-box">
                        <a href="javascript:login()" class="grad">登陆后可评论</a>
                      </div>                   </div>
               </div>
              <div class="site-box-content">
                <div class="site-content-title">
                  <h3 class="top-com-title mb-64"><span>0条评论</span></h3>   
                </div> 
                      <div class="pages"></ul></div>
              </div>
           </div>
           <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
              <div class=""> 
                <div class="com_layuiright-box user-msgbox">
                    <a href="https://www.ucloud.cn/yun/u-901.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000901.jpg" alt=""></a>
                    <h3><a href="https://www.ucloud.cn/yun/u-901.html" rel="nofollow">Salamander</a></h3>
                    <h6>男<span>|</span>高级讲师</h6>
                    <div class="flex_box_zd user-msgbox-atten">
                     
                                                                      <a href="javascript:attentto_user(901)" id="attenttouser_901" class="grad follow-btn notfollow attention">我要关注</a>
      
                                                                                        <a href="javascript:login()" title="发私信" >我要私信</a>
                     
                                            
                    </div>
                    <div class="user-msgbox-list flex_box_zd">
                          <h3 class="hpf">TA的文章</h3>
                          <a href="https://www.ucloud.cn/yun/ut-901.html" class="box_hxjz">阅读更多</a>
                    </div>
                      <ul class="user-msgbox-ul">
                                                  <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130952.html">tensorflow安装pandas</a></h3>
                            <p>阅读 2597<span>·</span>2023-04-26 02:23</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123047.html">程序员自制游戏:超级玛丽100%真实版,能把你玩哭了~【附源码】</a></h3>
                            <p>阅读 1277<span>·</span>2021-11-11 16:55</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122645.html">美国政府:今年发生了三起针对水处理厂的勒索软件攻击</a></h3>
                            <p>阅读 3001<span>·</span>2021-10-19 11:47</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120362.html">主机邦定域名什么意思-绑定域名是什么意思?</a></h3>
                            <p>阅读 3035<span>·</span>2021-09-22 15:15</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117256.html">前端基础入门三(CSS总结篇——思维导图)</a></h3>
                            <p>阅读 1761<span>·</span>2019-08-30 15:55</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113509.html">写给 Android 开发的小程序布局指南,Flex 布局!</a></h3>
                            <p>阅读 894<span>·</span>2019-08-29 15:43</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112488.html">前端开发者指南(2017)</a></h3>
                            <p>阅读 1158<span>·</span>2019-08-29 13:16</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112035.html">HTML+CSS复习之CSS基础篇</a></h3>
                            <p>阅读 2002<span>·</span>2019-08-29 12:38</p></li>
                                                
                      </ul>
                </div>
                <!-- 云社区相关服务 -->
                 
<div class="com_layuiright-box">
                  <h3 class="top-com-title"><span>云社区相关服务</span></h3> 
                    <div class="community-box flex_box flex_wrap community-box1">
                        <a href="https://www.ucloud.cn/yun/question/add.html" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon1.png" alt="提问">
                            <span>提问</span>
                        </a>
                        <a href="https://www.ucloud.cn/yun/article"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon2.png" alt="学习">
                            <span>学习</span>
                        </a>
                        
                        <a href="https://www.ucloud.cn/yun/user/vertify.html" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon4.png" alt="认证">
                            <span>认证</span>
                        </a>
                      
                        <a href="https://www.ucloud.cn/site/product/uhost.html?ytag=seo" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon5.png" alt="产品">
                            <span>产品</span>
                        </a>
                        
                        <a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon6.png" alt="技术服务">
                            <span>技术服务</span>
                        </a>
                          <a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon3.png" alt="售前咨询">
                            <span>售前咨询</span>
                        </a>
                    </div>   
                </div>                   <!-- 文章详情右侧广告-->
              
  <div class="com_layuiright-box">
                  <h6 class="top-com-title"><span>最新活动</span></h6> 
           
         <div class="com_adbox">
                    <div class="layui-carousel" id="right-item">
                      <div carousel-item>
                                                                                                                       <div>
                          <a href="https://www.ucloud.cn/site/product/uhost.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uhybrid.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/ucloudstack.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/utrion.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uhybrid.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uxzone.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/active/network.html?ytag=seo"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务">                                 
                          </a>
                        </div>
                                                                   
                    
                        
                      </div>
                    </div>
                      
                    </div>                    <!-- banner结束 -->
              
<div class="adhtml">

</div>
                <script>
                $(function(){
                    $.ajax({
                        type: "GET",
                                url:"https://www.ucloud.cn/yun/ad/getad/1.html",
                                cache: false,
                                success: function(text){
                                  $(".adhtml").html(text);
                                }
                        });
                    })
                </script>                </div>              </div>
           </div>
        </div>
      </div> 
    </section>
    <!-- wap拉出按钮 -->
     <div class="site-tree-mobile layui-hide">
      <i class="layui-icon layui-icon-spread-left"></i>
    </div>
    <!-- wap遮罩层 -->
    <div class="site-mobile-shade"></div>
    
       <!--付费阅读 -->
       <div id="payread">
         <div class="layui-form-item">阅读需要支付1元查看</div>  
         <div class="layui-form-item"><button class="btn-right">支付并查看</button></div>     
       </div>
      <script>
      var prei=0;

       
       $(".site-seo-depict pre").each(function(){
          var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
          $(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
          $(this).html("").append("<code>"+html+"</code>");
         prei++;
       })
           $(".site-seo-depict img").each(function(){
             
            if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
                $(this).remove();
            }
       })
     $("LINK[href*='style-49037e4d27.css']").remove();
       $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
  $("pre").attr("class","layui-code");
      $("pre").attr("lay-title","");
       $("pre").attr("lay-skin","");
  layui.code(); 
       $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)");
      
});
function copycode(target){
    var id=$(target).parent().parent().attr("id");
  
                  var clipboard = new ClipboardJS("#"+id);

clipboard.on('success', function(e) {


    e.clearSelection();
    alert("复制成功")
});

clipboard.on('error', function(e) {
    alert("复制失败")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
  <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
    <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
    <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

<script>
    function setcode(){
        var _html='';
    	  document.querySelectorAll('pre code').forEach((block) => {
        	  var _tmptext=$.trim($(block).text());
        	  if(_tmptext!=''){
        		  _html=_html+_tmptext;
        		  console.log(_html);
        	  }
    		 
    		  
    		 
      	  });
    	 

    }

</script>

<script>
function payread(){
  layer.open({
      type: 1,
      title:"付费阅读",
      shadeClose: true,
      content: $('#payread')
    });
}
// 举报
function jupao_tip(){
  layer.open({
      type: 1,
      title:false,
      shadeClose: true,
      content: $('#jubao')
    });

}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加载评论
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);

})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("评论内容不能为空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
 $(".button_agree").click(function(){
 var supportobj = $(this);
         var tid = $(this).attr("id");
         $.ajax({
         type: "GET",
                 url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid,
                 cache: false,
                 success: function(hassupport){
                 if (hassupport != '1'){






                         $.ajax({
                         type: "GET",
                                 cache:false,
                                 url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
                                 success: function(comments) {

                                 supportobj.find("span").html(comments+"人赞");
                                 }
                         });
                 }else{
                	 alert("您已经赞过");
                 }
                 }
         });
 });
 function attenquestion(_tid,_rs){
    	$.ajax({
    //提交数据的类型 POST GET
    type:"POST",
    //提交的网址
    url:"https://www.ucloud.cn/yun/favorite/topicadd.html",
    //提交的数据
    data:{tid:_tid,rs:_rs},
    //返回数据的格式
    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
    //在请求之前调用的函数
    beforeSend:function(){},
    //成功返回之后调用的函数
    success:function(data){
    	var data=eval("("+data+")");
    	console.log(data)
       if(data.code==2000){
    	layer.msg(data.msg,function(){
    	  if(data.rs==1){
    	      //取消收藏
    	      $(".layui-layer-tips").attr("data-tips","收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
    	  }
    	   if(data.rs==0){
    	      //收藏成功
    	      $(".layui-layer-tips").attr("data-tips","已收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
    	  }
    	})
    	 
       }else{
    	layer.msg(data.msg)
       }


    }   ,
    //调用执行后调用的函数
    complete: function(XMLHttpRequest, textStatus){
     	postadopt=true;
    },
    //调用出错执行的函数
    error: function(){
        //请求出错处理
    	postadopt=false;
    }
 });
}
</script>
<footer>
        <div class="layui-container">
            <div class="flex_box_zd">
              <div class="left-footer">
                    <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud (优刻得科技股份有限公司)"></a></h6>
                    <p>UCloud (优刻得科技股份有限公司)是中立、安全的云计算服务平台,坚持中立,不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品,并深入了解互联网、传统企业在不同场景下的业务需求,提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p>
              </div>
              <div class="right-footer layui-hidemd">
                  <ul class="flex_box_zd">
                      <li>
                        <h6>UCloud与云服务</h6>
                         <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p>
                         <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p>
                         <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p>
                         <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p>                                                  <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p>
                      </li>
                      <li>
                        <h6>友情链接</h6>
                                             <p><a href="https://www.surfercloud.com/">SurferCloud</a></p>
                         <p><a href="https://ucloudstack.com/" >私有云</a></p><p><a href="https://pinex.it" >pinex</a></p> <p><a href="https://www.renyucloud.com/" ></a></p>                                                                                                     <p><a href="https://www.picpik.ai" >AI Art Generator</a></p>  <p><a href="https://www.uwin-link.com" >工厂仿真软件</a></p>                           
                      </li>
                      <li>
                        <h6>社区栏目</h6>
                         <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p>
                         <p><a href="https://www.ucloud.cn/yun/ask/">专业问答</a></p>
                         <p><a href="https://www.ucloud.cn/yun/kc.html">云学院</a></p>
                     <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p>                      </li>
                      <li>
                        <h6>常见问题</h6>
                         <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p>                                                  <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p>                                                
                         <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p>
                      </li>
                      <li>
                          <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span>
                          <p>扫扫了解更多</p></div>
            </div>
            <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>|</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div> 
        </div>
    </footer>
</body>
<script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html>