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 打印内容方法小结
Nov 04 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
jquery 选取方法都有哪些
May 18 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
js实现页面导航层级指示效果
Aug 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python正则表达式介绍
2012/08/06 Python
python数据结构之列表和元组的详解
2017/09/23 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python温度转换华氏温度实现代码
2020/12/06 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
作息时间调整通知
2015/04/22 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书