jquery实现诗句竖排,逐句显示(个人随笔)
代码如下:
<!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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。