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>

  

时间: 2024-08-28 14:13:17

jquery实现诗句竖排,逐句显示(个人随笔)的相关文章

基于Jquery插件Uploadify实现实时显示进度条上传图片

网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考一下 先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支

jquery实现的div的显示和隐藏效果

jquery实现的div的显示和隐藏效果:在网页的实际应用中,有些模块需要根据需要显示或者隐藏,下面就提供了几个这方面的实例,代码非常的简单,都是使用jquery自带的函数实现的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>div隐藏显示效果</title> <style type="text/css&qu

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

jquery实现页面按条件显示图片

function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).fin

jQuery模拟键盘打字逐字逐句显示文本

html代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="wid

Jquery not选择器实现元素显示隐藏

初初认识jQuery的not选择器,想要实现的功能是,点击第一个div,显示第二个div,点击第一个div以外的地方,隐藏第二个div. 具体代码如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(

JQuery插件开发之如何实时显示被隐藏的输入框密码

原文链接:http://www.gbtags.com/gb/share/5827.htm 我们前面曾经介绍过如何提高用户界面表单性能,同时我们也介绍过如何避免使用密码框来避免隐藏输入的密码,也讨论过隐藏密码显示对于用户体验将有多么糟糕. 基本上对于密码输入处理我们有如下俩个可选方式: 继续使用密码框控件,不考虑用户的操作体验 使用一般的输入框,不考虑用户密码的安全性 这就是为什么我们这里需要开发一个鼠标悬浮可显示密码的控件作为第三选择的原因,既可以提高安全,同时也可以大大满足用户体验 今天将讲解

jquery mobile href超链接 单击显示error loading page

在a标签里添加 data-ajax="false" 或 rel="external" 属性 例:<a data-ajax="false" href="http://www.***.com/help/***.zip">点击下载</a> 详解: 外部页面链接 JQuery Mobile 主动化了创建ajax站点和法度的过程. 默认景象下,当你点击一个链接时会指向一个外部页面(如.products.html)