标签:
代码如下:
<!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