JS中for循序中延迟加载动态效果的具体实现


Posted in Javascript onAugust 18, 2013
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){     for(var i=1; i<6;i++)
    {
      var a=$("#zhong"+i+"").height();   //获取高度
      $("#zhong"+i+"").attr("OldHeight",a); //设置OldHeight属性
    }
    var e=0; //定义一个值
    interid=setInterval(Showgao,30);  //setInerval 每隔30ms加载一次
    function Showgao()
    {
       e++;
       for(var x=1;x<6;x++)
       {
         var b= $("#zhong"+x+"").attr("OldHeight");    

         if(typeof(b) == "undefined"||b!="")
         {
           if(e>b){$("#zhong"+x+"").height(b);}
           else{$("#zhong"+x+"").height(e);}
         }
       }
       if(e==1000){clearInterval(interid);}
    }
  });
</script>

再看看HTML代码
<div class="zhu no1">
       <div class="tou"><img src="images/toubg.png" /></div>
       <div id="zhong1" class="zhong" style="height:66px;"></div>
       <div class="wei"><img src="images/weibg.png" /></div>
     </div>
      <div class="zhu no2">
       <div class="tou"><img src="images/toubg.png" /></div>
       <div id="zhong2" class="zhong" style="height:0px;"></div>
       <div class="wei"><img src="images/weibg.png" /></div>
     </div>
     <div class="zhu no3">
       <div class="tou"><img src="images/toubg.png" /></div>
       <div id="zhong3" class="zhong" style="height:22px;"></div>
       <div class="wei"><img src="images/weibg.png" /></div>
     </div>     
     <div class="zhu no4">
       <img src="images/huisebg.png" />
     </div>

实现的效果是这样的,我的意思不知道大家能不能明白,其实就是先定好这个圆柱的高度,然后用JS动态的从0往上升,最好达到设定好的高度

JS中for循序中延迟加载动态效果的具体实现

Javascript 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
JS实现手风琴特效
Nov 08 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 #Javascript
JS通过相同的name进行表格求和代码
Aug 18 #Javascript
复选框全选与全不选操作实现思路
Aug 18 #Javascript
将文本输入框内容加入表中的js代码
Aug 18 #Javascript
js css后面所带参数含义介绍
Aug 18 #Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 #Javascript
向左滚动文字 js代码效果
Aug 17 #Javascript
You might like
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
layUI的验证码功能及校验实例
2019/10/25 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
Python实现身份证号码解析
2015/09/01 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
浅析python标准库中的glob
2020/03/13 Python
《维生素c的故事》教学反思
2014/02/18 职场文书
会计的岗位职责
2014/03/15 职场文书
法制宣传教育方案
2014/05/09 职场文书
给学校建议书范文
2014/05/13 职场文书
社会公德演讲稿
2014/05/20 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
出生证明格式
2015/06/15 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
nginx共享内存的机制详解
2022/03/21 Servers
python处理json数据文件
2022/04/11 Python