JS+DIV实现的卷帘效果示例


Posted in Javascript onMarch 22, 2017

本文实例讲述了JS+DIV实现的卷帘效果。分享给大家供大家参考,具体如下:

1、实例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>JS+DIV卷帘效果示例-F-BLOG</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style type="text/css">
    #box{overflow:hidden;height:25px;border:1px solid #666;width:300px;background-color:#ccc;}
    p{padding:0px;margin:0px;line-height:25px;}
    #demo2{overflow:hidden;height:30px;border:1px solid #666;width:400px;background-color:#ff0000;}
    h4{padding:0px;margin:0px;height:30px;line-height:30px;}
   </style>
  <script type="text/javascript">
    function reBox(Fid,defaultHeight,speed){
      var bheight=defaultHeight;
      var doScroll;
      var a=0,b=0;
      var $=function(id){
        return document.getElementById(id);
      }
      var createBox="<div id='"+Fid+"cbox'>"+$(Fid).innerHTML+"</div>";
      $(Fid).innerHTML=createBox;
      $(Fid).onclick=function(){
        if(a==0&&b==0){
          b=1;
          doScroll=setInterval(function(){
            if(bheight<$(""+Fid+"cbox").offsetHeight){
              var dist=Math.ceil(($(""+Fid+"cbox").offsetHeight-bheight)/10);
              bheight=bheight+dist;
              $(Fid).style.height=bheight+"px";
            }else{
              clearInterval(doScroll);
              a=1;
              b=0;
            }
          },speed);
        }
        if(a==1&&b==0){
          b=1;
          doScroll=setInterval(function(){
            if(bheight>defaultHeight){
              var dist=Math.ceil((bheight-defaultHeight)/10);
              bheight=bheight-dist;
              $(Fid).style.height=bheight+"px";
            }else{
              clearInterval(doScroll);
              a=0;
              b=0;
            }
          },speed);
        }
      }
    }
    window.onload=function(){
      reBox("box",25,30);
      reBox("demo2",30,10);
    }
</script>
 </head>
 <body>
  <P>示例一:纵向,目标div:box,默认高度:25px,速度:30毫秒,调用:reBox("box",25,30)</P>
  <div id="box">
    <p>高级Web程序员</p>
    <p>1、了解HTTP协议,对Web程序性能优化有一定经验</p>
    <p>2、精通MySQL数据库,能熟练地运用SQL语言,有丰富的数据建模经验, 熟悉SQL语句调优和数据库调优</p>
    <p>3、熟练使用至少一种版本(CVS,SVN)控制工具</p>
    <p>4、熟悉PHP语言及常见扩展(如mysql、pcre、xml等)</p>
    <p>5、熟悉面向对象(OO)程序设计</p>
  </div>
  <P>示例二:纵向,目标div:demo2,默认高度:30px,速度:10毫秒,调用:reBox("demo",30,10)</P>
  <div id="demo2">
    <h4>数据挖掘工程师</h4>
    <p>1、对海量数据分析、挖掘有浓厚兴趣,沉稳厚重</p>
    <p>2、熟悉PHP、JavaScript、HTML设计开发</p>
    <p>3、了解HTTP协议,对程序性能优化有一定经验</p>
    <p>4、精通MySQL数据库,能熟练地运用SQL语言</p>
  </div>
  <p>PS:从效果看,速度为10毫秒比较好</p>
  <p>By:傅唯一 2009-1-26</p>
 </body>
</html>

2、运行效果图如下:

JS+DIV实现的卷帘效果示例

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

Javascript 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
javascript 事件绑定问题
Jan 01 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 #Javascript
javascript实现滑动解锁功能
Mar 22 #Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 #Javascript
bootstrap IE8 兼容性处理
Mar 22 #Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 #Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 #Javascript
You might like
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python制作数据导入导出工具
2015/07/31 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python字符串格式化输出代码实例
2019/11/22 Python
keras输出预测值和真实值方式
2020/06/27 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
应届生求职推荐信
2013/10/28 职场文书
采购主管的岗位职责
2013/12/17 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
就业协议书范本
2014/04/11 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python