jquery toggle faq 春江花月夜版

豪情

dt{cursor:pointer;font-weight:bold;line-height:26px;color:#53AEF8;}
dd{line-height:23px;}
p{line-height:23px;margin:0;padding:0;}

$(function(){
$('#faq').find('dd').hide().end().find('dt').click(function(){
$(this).next().slideToggle();
});
});

+ 春江花月夜
春江花月夜，中国唐代诗人张若虚仅存的一首名诗，描绘春天夜晚江畔的景色，词句优美，被称为是"孤篇盖全唐"的杰作，闻一多称之为："这是诗中的诗，顶峰上的顶峰。"。该诗曾被中国当代著名音乐家彭修文改编为民族管弦乐曲，并因此广为流传。
+ 春江花月夜（其一）

春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明。

江流宛转绕芳甸，月照花林皆似霰。空里流霜不觉飞，汀上白沙看不见。

江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？

人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。

白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？

可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。

此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。

昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。

斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。

+ 典故解释：
【鸿雁长飞光不度／鱼龙潜跃水成文】
在中国古代，"鱼雁"和"书信"有着密切的渊源，古称信使为"鱼雁"，也叫"鸿鳞"。古诗文中留有许多记载，如"关山梦魂长，鱼雁音尘少"、"鱼书欲寄何由达？水远山长处处同"等，唐代著名诗人王昌龄诗中也有"手携双鲤鱼，目送千里雁"的句子。因为传说古代剖鲤鱼时，看见鱼肚里有书信——汉乐府《饮马长城窟行》中有"客从远方来，遗我双鲤鱼。呼儿烹鲤鱼，中有尺素书"——后来人们便把书信叫做"鱼书"了。而鸿雁是候鸟，往返有期，故人们想象鸿雁能传递音讯，因而书信又被称作"飞鸿"、"鸿书"等。《汉书·苏武传》载："教使者谓单于，言天子射上林中，得雁，足有系帛书。"说的是汉武帝时，苏武奉命出使匈奴，被囚胡地19年，矢志不变。他后来得以归汉，主要是因为匈奴单于相信汉使所说鸿雁传书上林苑，被汉昭帝射获，确知苏武在北海牧羊。匈奴单于无奈，只得放回苏武，"鸿雁传书"一时传为美谈。由于这种渊源，"鱼雁"成为了中国早期邮政的象征，如同欧洲一些国家早期邮政以牛号角、牛角头为标志一般。
本诗中这两句其实就是借取"鱼雁"这两个典故而化用到春天江滨景物中的。"鸿雁长飞光不度"，是说传递书信的鸿雁已经早就远远地飞走了，而月光又不能渡过，因而也就不能替我传递音信。"鱼龙潜跃水成文"，指传递书信的鱼龙（这里偏指鱼）也跃入到幽暗的水底藏了起来，看不见了，只剩下水面的波纹而已，意思还是指找不到传递音信的办法。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jquery实现标题字体变换的滑动门菜单效果

    jquery实现标题字体变换的滑动门菜单效果

    本文实例讲述了jquery实现标题字体变换的滑动门菜单效果.分享给大家供大家参考.具体如下: 这里使用jquery字体会变大的网页滑动门菜单,当把鼠标放在"门"上的时候,门内的菜单字体会变大变色,对应的内容同时切换,不知如何形容本效果,所以就叫字体会变的滑动门吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-font-cha-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html

  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-dow

  • jquery实现最简单的滑动菜单效果代码

    jquery实现最简单的滑动菜单效果代码

    本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

  • jQuery实现MSN中文网滑动Tab菜单效果代码

    jQuery实现MSN中文网滑动Tab菜单效果代码

    本文实例讲述了jQuery实现MSN中文网滑动Tab菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Msn中文网的滑动滑动门代码,利用jQuery实现的效果,代码很巧妙,就是利用一个绝对定位的层来实现移动效果,但是体验度大幅提升了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-msn-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <html>

  • jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

    jQuery实现鼠标悬停背景翻转的黑色导航菜单代码

    本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html

  • jQuery实现Meizu魅族官方网站的导航菜单效果

    jQuery实现Meizu魅族官方网站的导航菜单效果

    本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下边会有一条横线在滑动.一直想找类似的效果学一下.结果,不是忘记有类似效果的网站的网址,就是压根儿找不到..又不知道怎么描述,今天总算碰到了,真给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-meizu-web-nav-menu-

  • jQuery实现默认是闭合的FAQ展开效果菜单

    jQuery实现默认是闭合的FAQ展开效果菜单

    本文实例讲述了jQuery实现默认是闭合的FAQ展开效果菜单.分享给大家供大家参考.具体如下: 这是一个默认是闭合的FAQ展形菜单,主要介绍jQuery的用法. Boolean布尔值is( String expr )用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true.answer.is(':visible')是指可见的answer元素.如果可见就调用answer.slideUp();使之隐藏.else则是不可见的元素 调用answer.slideDow

  • jQuery+css实现的蓝色水平二级导航菜单效果代码

    jQuery+css实现的蓝色水平二级导航菜单效果代码

    本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • jquery toggle faq 春江花月夜版

    豪情 dt{cursor:pointer;font-weight:bold;line-height:26px;color:#53AEF8;} dd{line-height:23px;} p{line-height:23px;margin:0;padding:0;} $(function(){ $('#faq').find('dd').hide().end().find('dt').click(function(){ $(this).next().slideToggle(); }); }); +

  • jQuery双向列表选择器DIV模拟版

    jQuery双向列表选择器DIV模拟版

    前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:http://www.cnblogs.com/tie123abc/p/6018912.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器DIV

  • 页面元素绑定jquery toggle后元素隐藏的解决方法

    到今天实习已经一个多月了,公司给我布置的任务很少,哎,感觉有点不爽啊.既然这样,那我还是有事情做的,写毕业设计.言归正传,我今天在写毕业设计的时候,在给一个元素绑定jquery的toggle方法之后奇迹发生了,绑定这个方法的元素全部隐藏了.开始的时候 我怎么也没想到是这里有问题,我找了半天才发现是因为绑定了toggle方法.可是为什么绑定这个方法之后元素会隐藏呢? 其实具体原因我也不知道,我通过查找资料才得知,原来jquery在1.9版以后功能发生了变化,不在支持多个事件轮流切换了,搞了半天原来

  • JQuery toggle使用分析

    今天重点一个toggle(fn,fn,-.)函数,主要是用来切换某个事件的轮换操作. 比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的 背景色改为黑色. 我们定义的HTML代码如下: <body> <input type="button" id="btnShow" value="Toggle"/> <div id="DivToggle&quo

  • jQuery toggle()设置CSS样式

    toggle() 切换元素的可见状态. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. --------------------------------- 示例 切换所有段落的可见状态. HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle=&quo

  • jQuery toggle 代替方法

    具体内容如下所示: $('.back_left dt').toggle(function(){ $(this).addClass("selected"); $(this).siblings('dd').slideUp(); },function(){ $(this).removeClass("selected"); $(this).siblings('dd').slideDown(); }); 今天在做一个项目,抄了别人网站上的一代码,发现怎么都无法实现,在我急得不

  • jQuery轮播图效果精简版完整示例

    jQuery轮播图效果精简版完整示例

    本文实例讲述了jQuery轮播图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta ht

  • jquery 实现的改变颜色与背景的代码 change(fontsize,background)补充2

    change(fn) 在每一个匹配元素的change事件中绑定一个处理函数. change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发. 豪情 p{line-height:23px;margin:0;padding:0;} $(function(){ $('#c-obj select').change(function(){ alert($(this).attr('id') + ': ' + $(this).val()); $('p').css($(this).attr('i

  • Jquery change(fontsize,background) 改变颜色与背景的代码

    change(fn) 在每一个匹配元素的change事件中绑定一个处理函数. change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发. 豪情 p{line-height:23px;margin:0;padding:0;} $(function(){ $('#fontsize').change(function(){ var size = $('#fontsize').val(); $('p').css('font-size', size); }); $('#backgoun

  • JavaScript正则方法replace实现搜索关键字高亮显示

    JavaScript正则方法replace实现搜索关键字高亮显示

    前言 正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能. 先介绍一下正则表达式的replace方法 replace介绍 w3school原文链接介绍 正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键, var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数

随机推荐