隔行变色 | 等待-放飞梦想

在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子
Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行]

< !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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>可伸缩块</title> <style type="text/css"> p,div{margin:0;padding:0; font-size: 12px;} .box {float: left; margin-left: 20px; dipaly:inline;} .title1,.title2,.title3{width:280px;background:#cf0;height:20px;line-height: 20px;border:1px solid #aaa; text-align:center;} .content1,.content2,.content3{width:260px;height:350px;border:1px solid #aaa;border-top:none;padding: 10px;} </style> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".title1").click(function(){$(".content1").slideDown("slow");}); $(".title2").click(function(){$(".content2").slideUp("slow");}); $(".title3").click(function(){$(".content3").slideToggle("slow");}); }); </script> </head> <body> <div class="box"> <p class="title1">slideDown</p> <div class="content1"> 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div></div> <div class="box"> <p class="title2">slideUp</p> <div class="content2"> 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> <div class="box"> <p class="title3">slideToggle</p> <div class="content3"> 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

(更多…)

前端交互

li 列表隔行变换背景颜色的一些方法

jquery基础教程二[伸缩、隔行变色...]

分类

正在加载数据...

赞助商链接

随机文章

最新评论

一些朋友

链接