代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>诗句竖排,逐句显示</title> <script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script> <style type="text/css"> .poem{ width:200px; height:200px; margin:50px auto;} .poem span,.test1 li{ width:14px; word-break:break-all; margin-right:20px;} .hideSpan{ display:none;} </style> </head> <body> <div class="poem"> <span class="hideSpan">白日依山近</span> <span class="hideSpan">黄河入海流</span> <span class="hideSpan">欲穷千里目</span> <span class="hideSpan">更上一层楼</span> </div> <script> //诗句逐句显示效果 var i=0; var timer=setInterval(function(){ var len=$(".poem span").length; $(".poem span").eq(i).toggle("slow"); i++; if(i==len){ clearInterval(timer); }; },1000); </script> </body> </html>
原文:http://www.cnblogs.com/Farris/p/4455689.html