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中Array 对象相关的几个方法
Dec 22 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
使用javascript获取页面名称
Dec 23 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 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
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP 转义使用详解
2013/07/15 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
详解JavaScript树结构
2017/01/09 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
简单了解python反射机制的一些知识
2019/07/13 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
如何写求职信
2014/05/24 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
结婚老公保证书
2015/02/26 职场文书
患者身份识别制度
2015/08/06 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle