100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html页面内容的收缩和展开效果 jquery简单实现网页层的展开与收缩效果

html页面内容的收缩和展开效果 jquery简单实现网页层的展开与收缩效果

时间:2019-07-11 14:37:32

相关推荐

html页面内容的收缩和展开效果 jquery简单实现网页层的展开与收缩效果

本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下:

这里演示了jquery网页层展开、层收缩代码,带缓冲动画效果,点击指定的文字或按钮,可展开指定层,再次单击会收起层,类似效果网上已见到许多,请根据自己的需要修改代码,别忘了引入最新的jQuery插件哦。

运行效果截图如下:

具体代码如下:

/p>

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Div层的收缩与展开

#content {

font-size: 14px;

width: 730px;

height: 25px;

background:#FFF; line-height:25px;

border: 1px #ccc double;

overflow: hidden;

border:1px solid #99a5ab;

}

#key {

color: red;

float: right;

width:50px;

height:25px;

line-height:25px

margin:0 0 0 0;

}

$(function(){

$("#key").toggle(function(){

$(this).html("关闭").parent().animate({height:"280px"},1000);

},function(){

$(this).html("展开").parent().animate({height:"25px"},1000);

})

})

展开标题

希望本文所述对大家的jquery程序设计有所帮助。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。