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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
详解js创建对象的几种方式和对象方法
Mar 01 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
python操作日期和时间的方法
2014/03/11 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
团日活动总结怎么写
2014/06/25 职场文书
导游欢送词
2015/01/31 职场文书
搞笑婚前保证书
2015/02/28 职场文书
上下班时间调整通知
2015/04/23 职场文书