首页>>Jquery文字>>jQuery 自动切换文字内容 可以用于时间计时(2014-01-06)

jQuery 自动切换文字内容 可以用于时间计时

jQuery 自动切换文字内容 可以用于时间计时
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <h2>dynam<span class="dynamo" data-lines="ic">o</span></h2>  
  2. <p>This is a test document to see if your changes to dynamo.js work <span id="container1" data-delimiter="|" data-delay="1200">correctly.</span></p>  
  3. <p>Feel free to change this document and add any test cases you feel are appropriate.</p>  
  4. <p>This is <span id="pause_example" class="dynamo" data-pause="true" data-lines="not paused.">paused.</span></p>  
  5. <p>Here are some links: <span id="digit7"><a href="#">one</a></span></p>  
  6. <p>Here is a timer to showcase callback functionality.</p>  
  7. <div id="timer"> <span id="digit6" class="dynamo6">0</span> <span id="digit5" data-callback="bump(6)" class="dynamo10">0</span> : <span id="digit4" data-callback="bump(5)" class="dynamo6">0</span> <span id="digit3" data-callback="bump(4)" class="dynamo10">0</span> : <span id="digit2" data-callback="bump(3)" class="dynamo6">0</span> <span id="digit1" data-callback="bump(2)">0</span> </div>  
  8.   
  9. <script type="text/javascript" src="dynamo.js"></script>   
  10. <script type="text/javascript">  
  11.     // let's see if data-delay is overwritten as expected...  
  12.     $('#container1').dynamo({  
  13.       speed: 50,  
  14.       delay: 500,  
  15.       lines: ["as expected.", "at all.", "as planned."],  
  16.       callback: function() { console.log('callback works!'); }  
  17.     });  
  18.   
  19.     // clickable, paused dynamos  
  20.     $('#pause_example').click(function() {  
  21.       $(this).dynamo_trigger();  
  22.     });  
  23.   
  24.     // timer example  
  25.     bump = function(id) {  
  26.       return function() {  
  27.         $('#digit' + id).dynamo_trigger();  
  28.       }  
  29.     }  
  30.   
  31.     $('.dynamo10').dynamo({  
  32.       speed: 300,  
  33.       pause: true,  
  34.       lines: '123456789'.split('')  
  35.     });  
  36.   
  37.     $('.dynamo6').dynamo({  
  38.       speed: 300,  
  39.       pause: true,  
  40.       lines: '12345'.split('')  
  41.     });  
  42.   
  43.     $('#digit1').dynamo({  
  44.       speed: 300,  
  45.       delay: 1000,  
  46.       lines: '123456789'.split('')  
  47.     });  
  48.   
  49.     $('#digit7').dynamo({  
  50.       lines: [  
  51.         '<a href="#">two</a>',  
  52.         '<a href="#">three</a>'  
  53.       ]  
  54.     });  
  55.   
  56.   </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_220.html