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 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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静态新闻列表自动生成代码
2007/06/14 PHP
将数组写入txt文件 var_export
2009/04/21 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
Move.js入门
2017/02/08 Javascript
js随机生成一个验证码
2017/06/01 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python并发编程之线程实例解析
2017/12/27 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python绘制圆柱体的方法
2018/07/02 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
python实现超市商品销售管理系统
2019/10/25 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
Delphi工程师笔试题
2013/09/21 面试题
学校校庆演讲稿
2014/05/22 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
Python基本的内置数据类型及使用方法
2022/04/13 Python