点击展开收缩特效源码

作者：秋了秋发表时间：2014年09月23日

适合于放在网页顶部和底部的展开收缩js特效代码，js只几行代码。实用且美观。

代码演示：

<!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" /> <meta name="keywords" content="JS代码,JS广告代码,JS特效代码" /> <meta name="description" content="顶部下拉在线咨询代码（jQuery)" /> <title>顶部下拉特效www.wuover.com</title> <script type="text/javascript" src="http://resource.mizuiren.com/jquery.js">$(function(){ });</script> </head> <body></p> <p></p> <div class="tog_contact"> <div class="t_con_box"> <div class="drift_left"> <p class="f-yh">秋叶网络博客<br/>最新日志更新</p> </div> <dl> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/116.html">可关闭的右下角弹出广告特效代码</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/115.html">非常漂亮的网页秒表计时器</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/114.html">一款适用于放网站侧边栏的特效日历</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/113.html">日期选择表格快捷填充器特效</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/112.html">CSS3荷叶窗式切换的幻灯片特效</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/111.html">纯代码给wordpress制作二级多级菜单特效</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/110.html">js实现图片360度旋转特效</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/109.html">简洁纯css实现Lightbox特效</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/107.html">SEO不是全部，不要过度迷信SEO</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/103.html">资源分享俱乐部QQ群184139138</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/102.html">小评：（转载）不要把人生浪费在所谓的“正事”上</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/100.html">你是个成熟的人吗？-成熟的悟性标准</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/92.html">我不喜欢和别人比，也不喜欢别人拿我来比</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/98.html">非常轻巧的wordpress自适应双栏theme主题</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/97.html">一款免费高清屏幕游戏录像软件下载</a></li> <li><span>2014-4-9 12:35</span><a target="_blank" href="http://www.mizuiren.com/95.html">为什么一些国外的网站被中国墙了</a></li> <div> <ul> </dl> </div> </div> </div> <div class="tog" id="tog"><span>展开</span></div> <p></p> <style> body{ margin:0; padding:0;font-size:12px;-moz-user-select:none;}html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}img,body,html{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}</p> <p>a{text-decoration:none; font-size:12px;color:#000098;} a:hover{text-decoration:none;} li {line-height:20px;} /*top*/ .tog{ width:100%;height:30px; background:url(http://img.mizuiren.com/top_float_bg.png) 0 top repeat-x;position:absolute; z-index:2; cursor:pointer; bottom:0; } .tog span{ width:159px; height:30px; margin:-5px 0; line-height:45px; color:#FFF; text-align:center; display:block; background:url(http://img.mizuiren.com/tog.png) 0 5px no-repeat ; } .togclose{ width:100%; height:30px; background:url(http://img.mizuiren.com/top_float_bg.png) 0 top repeat-x; position:absolute; z-index:2; cursor:pointer; } .togclose span{ font-family:Verdana; font-size:12px; width:159px; height:30px; margin:-1px 0 0 0; text-align:center; line-height:35px; color:#FFF; display:block; background:url(http://img.mizuiren.com/togclose.png) 0 5px no-repeat; } .tog_contact{ height:433px; bottom:0; width:100%; position:absolute; z-index:1; display:none; } .t_con_box{ width:100%; margin-top:25px; height:433px; position:relative; } .drift_left{ width:100%; border-bottom:1px solid #EAEAEA; } .drift_left p{ padding:0 0 8px 18px; line-height:28px; color:#000098; font-size:14px; }</p> <p>.phone{width:478px;height:147px;} .phone dl{width:100%;padding:5px 0 0 18px;height:325px;} .phone dl dd{width:230px;} .phone dl dd , .phone dl dd div, .phone dl dd img, .phone dl dd h3, .phone dl dd span, .phone dl dd p{float:left;} .phone dl dd div{width:100%;padding:10px 0 4px;} .phone dl dd img{padding-top:4px;} .phone dl dd h3{width:160px;color:#d30000;font-size:16px;font-weight:normal;padding-left:10px;} .phone dl dd span{width:160px;padding-left:10px;font-family:Segoe UI;color:#8E8C8C;} .phone dl dd p{width:100%;color:#d30000;font-family:Impact;font-size:28px;} .phone dl dd .consult_img{padding-left:15px;} .phone dl dd .online{float:left;width:113px;color:#3b3b3b;height:34px;line-height:34px;background:url(../images/icon_online.gif) 0 0 no-repeat;} .phone dl dd .online q{float:left;line-height:30px;padding-left:46px;cursor:pointer;} .phone dl dd a.online:hover{color:#D30000;} .map{width:538px;height:297px;position:absolute;right:0;top:0;_clear:both;} </style> <p><script>$(function(){ $('#tog').toggle(function(){ $(this).animate({bottom:'433px'},320).addClass("togclose").removeClass("tog").html('<span>隐藏</span>'); $('.tog_contact').slideDown(320); },function(){ $(this).animate({bottom:'0px'},320).addClass("tog").removeClass("togclose").html('<span>展开</span>'); $('.tog_contact').slideUp(320); }) })</script> </body> </html>

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

除非注明，文章均由秋叶网络博客发布，欢迎转载。

转载请注明本文地址：http://www.mizuiren.com/131.html

目录: 网页特效 | 标签: 源码, js特效, 展开收缩 | 17029次阅读

点击展开收缩特效源码

作者：秋了秋 发表时间：2014年09月23日

作者：秋了秋发表时间：2014年09月23日