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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
js DOM的学习笔记
Dec 22 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
Javascript之this关键字深入解析
2013/11/12 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
django 简单实现登录验证给你
2019/11/06 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
社区端午节活动总结
2015/02/11 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
tomcat下部署jenkins的方法
2022/05/06 Servers