码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现诗句竖排,逐句显示(个人随笔)

时间:2015-04-25 13:31:02      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

代码如下:

<!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>

  

jquery实现诗句竖排,逐句显示(个人随笔)

标签:

原文地址:http://www.cnblogs.com/Farris/p/4455689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!