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