JQuery Tips：元素动态画圈-traceit.js

 

<a href="#">Mailbox <span class="badge">50</span></a>
<div><span id="testid">test</span></div>
 <dl id="menu_title">
        <dt class="active"><span class="badge">人</span></dt>
        <dd>一种高级动物</dd>
        <dt>狗</dt>
        <dd>人类的朋友</dd>
        <dt>猫</dt>
        <dd>猫科动物的祖先</dd>
</dl>
<div>

 

<script type="text/javascript" src="jquery.traceit.min.js" ></script>
<script type="text/javascript" src="raphael.min.js" ></script>

<script  type="text/javascript">  
  $(function () {  
      $("#testid").trace();          
  });
</script>

 

结果图：

 

 

资源链接：

https://github.com/yunap/traceit/

http://dmitrybaranovskiy.github.io/raphael/

参考：

http://www.noupe.com/development/howto-circle-marks-traceit-js-jquery-93591.html