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:json数据的页面绑定示例代码
Jan 26 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
js实现消灭星星(web简易版)
Mar 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二维数组排序详解
2013/11/06 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
offsetParent 算法分析
2010/04/05 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
Webpack3+React16代码分割的实现
2021/03/03 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python 实现dict转json并保存文件
2019/12/05 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
医院辞职信范文
2014/01/17 职场文书
英语故事演讲稿
2014/04/29 职场文书
门面房租房协议书
2014/08/20 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
雾霾停课通知
2015/04/24 职场文书
校长一岗双责责任书
2015/05/09 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP