JS实现的滑动展开与折叠效果

js

要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在FF也可应用,代码如下: 
<script type="text/javascript"> 
//Url: http://bbs.51js.com/thread-61646-1-1.html 
//Author: 风云突变 
//Modify: 枫岩 
var act; 
function over(s,nMax){ 
  var obj=document.getElementById(s); 
  var h = parseInt(obj.offsetHeight); 
  if (h < nMax){ 
    obj.style.height = (h + 2)+"px"; 
    clearTimeout(act); 
    act = setTimeout("over(’"+s+"’,"+nMax+")", 10); 
  } 

function out(s,nMin){ 
  var obj=document.getElementById(s); 
  var h = parseInt(obj.offsetHeight); 
  if (h > nMin){ 
    obj.style.height = (h - 2)+"px"; 
    clearTimeout(act); 
    act = setTimeout("out(’"+s+"’,"+nMin+")", 10); 
  } 

</script> 
<div id="mytd"   style="background:#eee;">代码实例:层的滑动展开/折叠</div>

时间: 2024-09-30 04:56:52

JS实现的滑动展开与折叠效果的相关文章

JS实现滑动展开与折叠效果

js 以下是引用片段:<script type="text/javascript"> //Url: http://bbs.51js.com/thread-61646-1-1.html //Author: 风云突变 //Modify: 枫岩 var act; function over(s,nMax){   var obj=document.getElementById(s);   var h = parseInt(obj.offsetHeight);   if (h <

网页特效:滑动展开与折叠效果

特效|网页|网页特效    需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在FF也可应用,代码如下:<script type="text/javascript"> //Url: http://bbs.51js.com/thread-61646-1-1.html //Author: 风云突变 //Modify: 枫岩 var act; function over(s,nMax){   var obj=document.getElementById(s)

jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果_jquery

本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-

JS+CSS实现滑动切换tab菜单效果_javascript技巧

本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影.本菜单在火狐.IE8.Chrome下测试通过,代码兼容性还可以,自己用的化再美化一下风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-

jquery实现点击查看更多内容控制段落文字展开折叠效果_jquery

本文实例讲述了jquery实现点击查看更多内容控制段落文字展开折叠效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能,在很多大网站都有在用,像一些电影简介.产品介绍有时候为了页面的布局效果,常常默认是隐藏了一部分,用户想看的时候可以点击后展开. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <

滑动展开/收缩广告代码实例效果

广告 功能说明: 滑动展开/收缩广告效果,可指定:广告完全展开时的停留时间,最大高度 兼容浏览器: IE5.0+.FF1.06+.Opera8.0+ 实例代码:  <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="htt

JS+CSS实现的简单折叠展开多级菜单效果_javascript技巧

本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如

js实现超简单的展开、折叠目录代码_javascript技巧

本文实例讲述了js实现超简单的展开.折叠目录代码.分享给大家供大家参考.具体如下: 这里介绍一款超简单的目录,展开菜单代码,鼠标点击即可展开,再次点击即可合拢,类似树形菜单的功能,网上见过很多,不多做介绍了,欢迎参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/ 具体代码如下: <title>可折叠展开的简单目录</title> <style> div{

JS实现仿QQ面板的手风琴效果折叠菜单代码_javascript技巧

本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!