1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>vTicker</title> <meta name="description" content=" "> <meta name="keywords" content=" "> <style type="text/css" media="all"> body,html { padding: 0; margin: 0; } body { background: #cccccc; } #news-container { width: 400px; margin: auto; margin-top: 30px; border: 5px solid #333333; } #news-container ul li div { border: 1px solid #aaaaaa; background: #ffffff; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.vticker-min.js"></script> <script type="text/javascript"> $(function(){ $('#news-container').vTicker({ speed: 500, pause: 3000, animation: 'fade', mousePause: false, showItems: 3 }); $('#news-container1').vTicker({ speed: 700, pause: 4000, animation: 'fade', mousePause: false, showItems: 1 }); }); </script> </head><body> <div id="news-container1"> <ul> <li>News content1</li> <li>News content2</li> <li>News content3</li> <li>News content4</li> <li>News content5</li> </ul> </div> <div style="overflow: hidden; position: relative; height: 114px;" id="news-container"> <ul style="position: absolute; margin: 0pt; padding: 0pt; top: 0px;"> <li style="margin: 0pt; padding: 0pt; height: 38px; display: list-item;"> <div> 4) jugbit.com jquery vticker more info more info more info more info more info </div> </li> <li style="margin: 0pt; padding: 0pt; height: 38px; display: list-item;"> <div> 1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. more info </div> </li><li style="margin: 0pt; padding: 0pt; height: 38px; display: list-item;"> <div> 2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info </div> </li><li style="margin: 0pt; padding: 0pt; height: 38px;"> <div> 3) Lorem ipsum dolor sit amet more info more info more info more info </div> </li></ul> </div> </body></html> | cs |
MrZZang