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

特效|网页|网页特效

   需要写个滑动展开折叠的效果,搜索到无忧脚本的一篇贴子,稍加修改了下使其在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>
     无忧网友 fangxiao9159 再次优化后:

<script type="text/javascript">
var intervalId = null;
function move(id,state){
  var obj = document.getElementById(id);
  if(intervalId != null) 
    window.clearInterval(intervalId);
  function change(){
   var h = parseInt(obj.offsetHeight);
   obj.style.height = (state == "down") ? (h + 2) : (h - 2);
  }
  intervalId = window.setInterval(change,10);
}
</script>
<table border="1" cellpadding="0" cellspacing="0" id="mytd"  >
<tr><td>无忧脚本 - 风云突变</td></tr></table>

时间: 2024-08-02 14:58:58

网页特效:滑动展开与折叠效果的相关文章

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);   

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 <

jquery简单实现网页层的展开与收缩效果_jquery

本文实例讲述了jquery简单实现网页层的展开与收缩效果.分享给大家供大家参考.具体如下: 这里演示了jquery网页层展开.层收缩代码,带缓冲动画效果,点击指定的文字或按钮,可展开指定层,再次单击会收起层,类似效果网上已见到许多,请根据自己的需要修改代码,别忘了引入最新的jQuery插件哦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

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

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

js网页特效漂亮的星级评价效果

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <title>js网页特效漂亮的星级评价效果</title> <style type="text/css"> body{ margin:0;padding:0 10px;color:#333;text-align:

js网页特效-滑动条调节打字速度的效果

Aug. 15th(心情:挺不错的) 中国WEB第一站 网页,网页设计,网页制作,网页学习,网页教学,Photoshop,Flash,HTML,CSS,Dreamweaver,Fireworks,ASP,PHP,JSP,ASP.NET,网站建设,网站开发,网页特效,平面设计,个人网站,网页素材. 控制台 自动滚屏 动画速度(单击调节) 进度 日志评论

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

广告 功能说明: 滑动展开/收缩广告效果,可指定:广告完全展开时的停留时间,最大高度 兼容浏览器: 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

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

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

js实现左侧网页tab滑动门效果代码_javascript技巧

本文实例讲述了js实现左侧网页tab滑动门效果代码.分享给大家供大家参考.具体如下: 这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡,兼容IE6/IE7/FF/opera浏览器.其实竖排和横排的代码基本一样,只不过稍加修改就可以了.只要学会了一种滑动门,就能举一返三了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-tab-cha-style-codes/ 具体代码如下: <!DOCTY