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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
Javascript 面向对象 继承
May 13 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
原生JavaScript实现随机点名表
Jan 14 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php学习笔记之基础知识
2014/11/08 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python如何读写二进制数组数据
2020/08/01 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
2014年大学生工作总结
2014/11/20 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
关于车尾的标语大全
2015/08/11 职场文书
小学体育课教学反思
2016/02/16 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript