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 相关文章推荐
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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作的文本留言本的例子(一)
2006/10/09 PHP
Php+SqlServer实现分页显示
2006/10/09 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Python延迟绑定问题原理及解决方案
2020/08/04 Python
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
国际贸易专业求职信
2014/06/04 职场文书
服务理念标语
2014/06/18 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
英语教学课后反思
2016/02/15 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL