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的一行代码轻松实现拖动效果
Dec 28 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
$.extend 的一个小问题
Jun 18 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
layui table单元格事件修改值的方法
Sep 24 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过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
javascript调试说明
2010/06/07 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
python asyncio 协程库的使用
2021/01/21 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
类的返射机制中的包及核心类
2016/09/12 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
消防安全宣传口号
2014/06/10 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2015年元旦标语大全
2014/12/09 职场文书
实习单位鉴定意见
2015/06/04 职场文书
公司仓库管理制度
2015/08/04 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
2019秋季运动会口号
2019/06/25 职场文书
职工的安全责任书范文!
2019/07/02 职场文书