在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例Ajax框架/RIA → jQuery DrawSVG 路径动画 例子

jQuery DrawSVG 路径动画 例子

Ajax框架/RIA

下载此实例
  • 开发语言:js
  • 实例大小:0.05M
  • 下载次数:1480
  • 浏览次数:414
  • 发布时间:2015-12-13
  • 实例类别:Ajax框架/RIA
  • 发 布 人:crazycode
  • 文件格式:.zip
  • 所需积分:2
 相关标签: jQuery svg 路径

实例介绍

【实例简介】
【实例截图】

【核心代码】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Lightweight, simple to use jQuery plugin to animate SVG paths">
  <meta name="robots" content="all">
  <title>jQuery DrawSVG</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans:400,600">
  <link rel="stylesheet" href="style.css">

  <meta property="og:title"       content="jQuery DrawSVG">
  <meta property="og:type"        content="website">
  <meta property="og:description" content="Lightweight, simple to use jQuery plugin to animate SVG paths">
  <meta property="og:url"         content="http://lcdsantos.github.io/jquery-drawsvg/">
  <meta property="og:site_name"   content="jQuery DrawSVG">
  <meta property="og:image"       content="http://lcdsantos.github.io/jquery-drawsvg/share.jpg">

  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:site"        content="@lcdsantos">
  <meta name="twitter:creator"     content="@lcdsantos">
  <meta name="twitter:title"       content="jQuery DrawSVG">
  <meta name="twitter:description" content="Lightweight, simple to use jQuery plugin to animate SVG paths">
  <meta name="twitter:image:src"   content="http://lcdsantos.github.io/jquery-drawsvg/share.jpg">

  <link rel="author" href="https://plus.google.com/110463198138936295653/posts">
</head>
<body>

  <div class="intro">
    <div class="container">
      <div class="overlay">
        <div class="inner">
          <h1>jQuery DrawSVG</h1>

          <div class="items-wrapper">
            <div class="item active">
              <svg viewBox="0 0 201 146" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="201" height="146">
                <g stroke="#FFF" stroke-width="1" fill="none">
                  <path d="M200.5 128.586c0 9.302-7.678 16.914-17.06 16.914H17.56C8.18 145.5.5 137.888.5 128.586V29.414C.5 20.112 8.178 12.5 17.56 12.5h165.88c9.382 0 17.06 7.612 17.06 16.914v99.172z"/>
                  <path d="M183.828 80.118c0 26.467-21.644 47.924-48.34 47.924-26.698 0-48.342-21.457-48.342-47.924s21.644-47.924 48.34-47.924c26.698 0 48.342 21.457 48.342 47.924z"/>
                  <path d="M171.98 80.118c0 19.978-16.338 36.177-36.493 36.177-20.15 0-36.49-16.2-36.49-36.177 0-19.98 16.34-36.177 36.49-36.177 20.155 0 36.494 16.2 36.494 36.178z"/>
                  <path d="M50.18 48.637c0 6.49-5.304 11.747-11.852 11.747-6.543 0-11.847-5.258-11.847-11.747 0-6.488 5.305-11.746 11.848-11.746 6.548 0 11.852 5.26 11.852 11.747z"/>
                  <path d="M17.928 39.877c3.41-7.835 11.258-13.305 20.416-13.305 9.16 0 17.006 5.47 20.416 13.305"/>
                  <path d="M46 12V4H26v8"/>
                  <path d="M94.833 12l11.5-11.5h59.5l11.5 11.5"/>
                  <path d="M26.333 92.5h35.5"/>
                  <path d="M26.333 105.5h43"/>
                  <path d="M26.333 117.5h52"/>
                </g>
              </svg>
            </div>

            <div class="item">
              <svg viewBox="0 0 207 105" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="207" height="105">
                <g stroke="#FFF" stroke-width="1" fill="none">
                  <path d="M127 63.496C127 85.306 144.455 103 165.998 103 187.538 103 205 85.306 205 63.496 205 41.682 187.537 24 165.998 24 144.455 24 127 41.682 127 63.496z"/>
                  <path d="M195 63.497C195 47.206 182.015 34 166 34"/>
                  <path d="M2 63.496C2 85.306 19.455 103 41.002 103 62.542 103 80 85.306 80 63.496 80 41.682 62.54 24 41.002 24 19.455 24 2 41.682 2 63.496z"/>
                  <path d="M64.296 22.732C57.656 18.094 47.492 16 41.002 16c-6.49 0-12.675 1.33-18.3 3.732-5.622 2.404-10.686 5.88-14.938 10.178"/>
                  <path d="M159.715 63.576c0 3.634 2.902 6.575 6.49 6.575 3.582 0 6.484-2.94 6.484-6.574 0-3.63-2.903-6.575-6.486-6.575-3.587 0-6.49 2.946-6.49 6.576z"/>
                  <path d="M34.873 64.032c0 3.63 2.907 6.575 6.494 6.575 3.578 0 6.485-2.945 6.485-6.575 0-3.635-2.907-6.575-6.485-6.575-3.587 0-6.494 2.94-6.494 6.575z"/>
                  <path d="M163.25 57.026L141.773 3"/>
                  <path d="M98 63.5H48"/>
                  <path d="M101.73 57.63L70.5 14.013"/>
                  <path d="M70.49 14.5h76.646v-.206"/>
                  <path d="M139.134 14.505L108.468 57.95"/>
                  <path d="M70.894 15.05L42.834 57.05"/>
                  <path d="M70.5 14V3"/>
                  <path d="M141.427 3.23s19.83-7.71 19.83 6.344"/>
                  <path d="M97.816 62.52c0 3.576 2.86 6.475 6.39 6.475s6.392-2.9 6.392-6.476c0-3.577-2.86-6.476-6.39-6.476s-6.392 2.9-6.392 6.476z"/>
                  <path d="M106.642 69.26l2.913 11.044"/>
                  <path d="M105 83l10-5"/>
                  <path d="M62.5 3.5h18"/>
                </g>
              </svg>
            </div>

            <div class="item">
              <svg viewBox="0 0 201 116" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="201" height="116">
                <g stroke="#FFF" stroke-width="1" fill="none">
                  <path d="M19.5 101.5V6.45C19.5 3.176 23.12.5 26.402.5H175.53c3.282 0 5.97 2.677 5.97 5.95v95.05"/>
                  <path d="M171.5 89.5h-140v-77h140v77z"/>
                  <path d="M200.5 107.526c0 1.635-1.344 2.974-2.985 2.974H3.485c-1.64 0-2.985-1.34-2.985-2.974v-3.052c0-1.635 1.344-2.974 2.985-2.974h194.03c1.64 0 2.985 1.34 2.985 2.974v3.052z"/>
                  <path d="M1 110l10.5 5.5"/>
                  <path d="M11.604 115.5H189.46"/>
                  <path d="M189.5 115.5l9.5-5.5"/>
                  <path d="M99.5 7.5h5"/>
                  <path d="M138.5 12.5l28 28"/>
                  <path d="M148.5 12.5l18 18"/>
                  <path d="M159.5 12.5l7 6"/>
                </g>
              </svg>
            </div>

            <div class="item">
              <svg viewBox="0 0 200 155" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="200" height="155">
                <g stroke="#FFF" stroke-width="1" fill="none">
                  <path d="M161.996 151.39l-33.97-27.178-45.01 30.576-35.67-27.603L.36 154.245 38.662 20.04 80.893 4.034l39.066 17.41L161.995.213l37.792 22.932-37.792 128.246z"/>
                  <path d="M47.346 127.185L80.892 4.035"/>
                  <path d="M83.015 154.788l36.942-133.343"/>
                  <path d="M128.025 124.212l33.97-124"/>
                  <path d="M46.278 23.935L32.29 75.605"/>
                  <path d="M95.802 45.718L81.19 97.225"/>
                  <path d="M106.91 33.115l-22.26 81.39"/>
                  <path d="M176.768 46.665c0 3.523-2.85 6.376-6.366 6.376-3.514 0-6.364-2.852-6.364-6.375 0-3.512 2.85-6.37 6.364-6.37 3.516 0 6.366 2.858 6.366 6.37z"/>
                  <path d="M180.9 52.392l-10.844 19.91-10.394-19.995s-1.143-3.215-1.143-5.067c0-6.514 5.273-11.81 11.79-11.81 6.508 0 11.782 5.296 11.782 11.81 0 1.852-1.192 5.152-1.192 5.152z"/>
                  <path d="M43.86 92.528c0 3.523-2.85 6.376-6.367 6.376-3.514 0-6.364-2.853-6.364-6.376 0-3.512 2.85-6.37 6.363-6.37 3.517 0 6.366 2.858 6.366 6.37z"/>
                  <path d="M47.99 98.255l-10.843 19.91L26.754 98.17s-1.143-3.215-1.143-5.067c0-6.514 5.275-11.81 11.793-11.81 6.507 0 11.78 5.296 11.78 11.81 0 1.852-1.192 5.152-1.192 5.152z"/>
                </g>
              </svg>
            </div>
          </div>

          <p>Lightweight, simple to use jQuery plugin to animate SVG paths</p>

          <div class="btn-group">
            <a target="_blank" href="https://github.com/lcdsantos/jquery-drawsvg/archive/master.zip" class="btn">Download (ZIP)</a>
            <a target="_blank" href="https://github.com/lcdsantos/jquery-drawsvg/archive/master.tar.gz" class="btn">Download (TAR)</a>
            <a target="_blank" href="https://github.com/lcdsantos/jquery-drawsvg" class="btn">View on GitHub</a>
            <br>
            <a target="_blank" href="https://raw.githubusercontent.com/lcdsantos/jquery-drawsvg/master/public/jquery.drawsvg.js" class="link">jquery.drawsvg.js</a>
            <a target="_blank" href="https://raw.githubusercontent.com/lcdsantos/jquery-drawsvg/master/public/jquery.drawsvg.min.js" class="link">jquery.drawsvg.min.js</a>
          </div>
        </div>
      </div>
    </div>

    <p class="icons-author">Icons by <a target="_blank" href="https://dribbble.com/OtherPlanet">Luboš Volkov</a></p>
  </div>

  <header>
    <div class="container">
      <nav>
        <ul>
          <li><a href="#features">features</a></li>
          <li><a href="#usage">usage</a></li>
          <li><a href="#options">options</a></li>
          <li><a href="#demos">demos</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="anchor" id="features"></div>
      <h2>FEATURES</h2>

      <p>This plugin uses the jQuery built-in animation engine to transition the <code>stroke</code> on every <code>&lt;path&gt;</code> inside the selected <code>&lt;svg&gt;</code> element, using <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> properties.</p>

      <br>

      <ul>
        <li>
          <p>Weights less than 2KB minified and 800 bytes gzipped.</p>
        </li>

        <li>
          <p>Easy to use.</p>
        </li>

        <li>
          <p>Easing and stagger support.</p>
        </li>

        <li>
          <p>Free!</p>
        </li>
      </ul>

      <ul class="social-buttons">
        <li class="gh-btn">
          <iframe width="85" height="20" title="Star on GitHub" src="http://ghbtns.com/github-btn.html?user=lcdsantos&repo=jquery-drawsvg&type=watch&count=true"></iframe>
        </li>

        <li class="tweet-btn">
          <a href="https://twitter.com/share" class="twitter-share-button" data-text="Lightweight, simple to use jQuery plugin to animate SVG paths" data-via="lcdsantos" data-related="lcdsantos">Tweet</a>
        </li>

        <li class="fb-btn">
          <div class="fb-like" data-href="http://lcdsantos.github.io/jquery-drawsvg/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
        </li>

        <li class="flattr-btn">
          <a href="https://flattr.com/submit/auto?user_id=lcdsantos&url=http%3A%2F%2Flcdsantos.github.io%2Fjquery-drawsvg%2F" target="_blank"><img src="//api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"></a>
        </li>

        <li class="gplus-btn">
          <div class="g-plusone" data-annotation="inline" data-width="80" data-size="medium"></div>
        </li>
      </ul>
    </div>

    <div class="container">
      <div class="anchor" id="usage"></div>
      <h2>USAGE</h2>

      <ul class="steps">
        <li>
          <p>Include jQuery DrawSVG <strong>after</strong> jQuery</p>
          <pre><code class="language-markup">&lt;script src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;&gt;&lt;/script&gt;<br/>&lt;script src=&quot;jquery.drawsvg.js&quot;&gt;&lt;/script&gt;</code></pre>
        </li>
        <li>
          <p>Initialize the plugin on the &lt;svg&gt; element you want to animate and store in a variable</p>
          <pre><code class="language-javascript">var mySVG = $('#my_svg_element').drawsvg();</code></pre>
        </li>
        <li>
          <p>Run the animation</p>
          <pre><code class="language-javascript">mySVG.drawsvg('animate');</code></pre>
        </li>
      </ul>

      <p>Look at the <a href="#demos">demos</a> for more advanced usages.</p>
    </div>

    <div class="container">
      <div class="anchor" id="options"></div>
      <h2>OPTIONS</h2>

      <table class="table-options">
        <tr>
          <th>Option</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>

        <tr>
          <td><code>duration</code></td>
          <td>Integer</td>
          <td><code>1000</code></td>
          <td>The time to complete the animation of each path.</td>
        </tr>

        <tr>
          <td><code>stagger</code></td>
          <td>Integer</td>
          <td><code>200</code></td>
          <td>Delay to start animating each individual path.</td>
        </tr>

        <tr>
          <td><code>easing</code></td>
          <td>String</td>
          <td><code>swing</code></td>
          <td>Which easing function each path will use to transition. <br> Use <a target="_blank" href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a> for different easing functions.</td>
        </tr>

        <tr>
          <td><code>reverse</code></td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>Direction that the line will be drawn.</td>
        </tr>

        <tr>
          <td><code>callback</code></td>
          <td>Function</td>
          <td><code>function() {}</code></td>
          <td>A function to call once the animation has been completed.</td>
        </tr>
      </table>
    </div>

    <div class="container">
      <div class="anchor" id="demos"></div>
      <h2>DEMOS</h2>

      <h4>Simple usage</h4>
      <p data-height="400" data-theme-id="18708" data-slug-hash="zvGXbr" data-default-tab="result" data-user="lcdsantos" class='codepen'>See the Pen <a href='http://codepen.io/lcdsantos/pen/zvGXbr/'>zvGXbr</a> by Leonardo Santos (<a href='http://codepen.io/lcdsantos'>@lcdsantos</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

      <h4>Draw on scroll</h4>
      <p data-height="400" data-theme-id="18708" data-slug-hash="zvGQYB" data-default-tab="result" data-user="lcdsantos" class='codepen'>See the Pen <a href='http://codepen.io/lcdsantos/pen/zvGQYB/'>zvGQYB</a> by Leonardo Santos (<a href='http://codepen.io/lcdsantos'>@lcdsantos</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

      <h4>Callback example</h4>
      <p data-height="400" data-theme-id="18708" data-slug-hash="vNNXrm" data-default-tab="result" data-user="lcdsantos" class='codepen'>See the Pen <a href='http://codepen.io/lcdsantos/pen/vNNXrm/'>vNNXrm</a> by Leonardo Santos (<a href='http://codepen.io/lcdsantos'>@lcdsantos</a>) on <a href='http://codepen.io'>CodePen</a>.</p>

      <h4>Animate mask path</h4>
      <p data-height="400" data-theme-id="18708" data-slug-hash="xwwEJw" data-default-tab="result" data-user="lcdsantos" class='codepen'>See the Pen <a href='http://codepen.io/lcdsantos/pen/xwwEJw/'>xwwEJw</a> by Leonardo Santos (<a href='http://codepen.io/lcdsantos'>@lcdsantos</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
    </div>
  </main>

  <footer>
    <div class="container">
      <div class="copy">
        <p style="float: left;">Project maintained by <b>Leonardo Santos</b> <br>
        <a href="https://github.com/lcdsantos">Github</a> • <a href="https://twitter.com/lcdsantos">Twitter</a> • <a href="mailto:leocs.1991@gmail.com">Email</a></p>
        <p style="float: right;">Hosted on GitHub Pages</p>
      </div>
    </div>
  </footer>

  <div id="fb-root"></div>

  <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
  <script src="https://cdn.jsdelivr.net/g/jquery@1.11.3,jquery.easing@1.3(jquery.easing.1.3.min.js)"></script>
  <script src="jquery.drawsvg.min.js"></script>
  <script>
    $(function() {

      var $doc = $(document),
          $win = $(window);

      var $intro = $('.intro'),
          $items = $intro.find('.item'),
          itemsLen = $items.length,
          svgs = $intro.find('svg').drawsvg({
            callback: animateIntro,
            easing: 'easeOutQuart'
          }),
          currItem = 0;

      function animateIntro() {
        $items.removeClass('active').eq( currItem   % itemsLen ).addClass('active').find('svg').drawsvg('animate');
      }

      animateIntro();

      var $header = $('header'),
          headerOffTop = $header.offset().top,
          isFixed = false;

      function menu() {
        if ( $win.scrollTop() >= headerOffTop ) {
          if ( !isFixed ) {
            isFixed = true;
            $header.addClass('affix');
          }
        } else if ( isFixed ) {
          isFixed = false;
          $header.removeClass('affix');
        }
      }

      $win.on('scroll', menu);
      menu();

      $header.on('click', 'a[href^="#"]', function(e) {
        e.preventDefault();

        var hash = this.hash,
            offset = $(hash).offset().top;

        $('body, html').animate({
          scrollTop: offset
        }, 600, 'easeInOutQuart', function() {
          document.location.hash = hash;
        });
      });

    });

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-67451713-1', 'lcdsantos.github.io');
    ga('require', 'displayfeatures');
    ga('send', 'pageview');

    function getScript(a,b,c,e){var d=a.getElementsByTagName(b)[0];a.getElementById(c)||(a=a.createElement(b),a.id=c,a.src=e,d.parentNode.insertBefore(a,d))};

    getScript(document, 'script', 'facebook-jssdk', '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=146929405493694');
    getScript(document, 'script', 'twitter-wjs', '//platform.twitter.com/widgets.js');
    getScript(document, 'script', 'googleplus-wjs', '//apis.google.com/js/plusone.js');
  </script>
</body>
</html>

标签: jQuery svg 路径

实例下载地址

jQuery DrawSVG 路径动画 例子

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警