<!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>宽度缓慢变化</title>

         <style>

             #chg {

                 width: 200px;

                 height: 120px;

                 background-color: #390;

                 margin: auto;

             }

             #btn {

                 width: 200px;

                 height: 30px;

                 background-color: #000;

                 margin: auto;

                 display: block;

                 cursor: pointer;

                 color: #FFF;

                 font-size: 12px;

                 text-align: center;

                 line-height: 30px;

                 font-weight: bolder;

             }

         </style>

     </head>

     <body>

         <div id="chg"></div><br />

         <div id="btn" onclick="$d3()">展开</div>

     </body>

 </html>

 <script>

     function $d1() {

         var l = document.getElementById("chg");

         var w = l.offsetWidth;

         var maxw = 500;

         function chgws() {

             w += 1;

             if(w >= maxw) {

                 l.style.width = '500px';

                 clearInterval(iIntervalId);

             } else {

                 l.style.width = w + 'px';

             }

         }

         iIntervalId = setInterval(chgws, 10);

     }

     function $d2() {

         var m = document.getElementById("chg");

         var n = m.offsetWidth;

         var maxw = 500;

         function chgwh() {

             n -= 1;

             if(n <= 200) {

                 m.style.width = '200px';

                 clearInterval(iIntervalId);

             } else {

                 m.style.width = n + 'px';

             }

         }

         iIntervalId = setInterval(chgwh, 10);

     }

     function $d3() {

         var q = document.getElementById("chg");

         var chgb = document.getElementById('btn');

         if(chgb.innerHTML == "展开") {

             chgb.innerHTML = "收缩";

             $d1();

         } else {

             chgb.innerHTML = "展开";

             $d2();

         }

     }

 </script>

DIV宽度自动缓慢变化的更多相关文章

  1. 使用CSS3的“transition ”属性控制长宽度的缓慢变化

    有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...

  2. JavaScript实现div宽、高自动缓慢拉伸

    最近打算实现一个带有滤镜效果的地自动拉伸图片.发现使用css3浏览器兼容性得需要特别关注.这里我使用js实现了一个div边框自动拉伸和缩小.源码如下: <!DOCTYPE html>< ...

  3. div宽度随屏幕大小变化

    题目: 一个页面上两个div左右铺满整个浏览器, 要保证左边的div一直为100px,右边的div跟随浏览器大小变化, 比如浏览器为500,右边div为400,浏览器为900,右边div为800. 方 ...

  4. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  5. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  6. ODI 11g & 12c中缓慢变化维（SCD）的处理机制

    缓慢变化维(Slowly changing Dimensions)指的是维表中的维度字段值会随着时间或业务调整,而在后续的分析中,历史数据仍然要使用旧的维度值,新的数据会使用当前维度值.在数据仓库建设 ...

  7. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  8. (转载)html中div使用自动高度

    为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签:     static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...

  9. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

随机推荐

  1. python self introspection

    http://www.ibm.com/developerworks/cn/linux/l-pyint/index1.html

  2. JavaScript Coding 模式荟萃

    1.自运行的匿名函数 <script type="text/javascript" src="./js/jquery-1.7.2.js"></ ...

  3. 【Java】Java 深入探讨 单例模式的实现

    在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下.   所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在 ...

  4. WinAPI: ShellExecute - 打开外部程序或文件

    WinAPI: ShellExecute - 打开外部程序或文件 ShellExecute(   hWnd: HWND;        {指定父窗口句柄}   Operation: PChar;  { ...

  5. ACM/ICPC 之 暴力打表(求解欧拉回路)-编码（POJ1780）

    ///找到一个数字序列包含所有n位数(连续)一次且仅一次 ///暴力打表 ///Time:141Ms Memory:2260K #include<iostream> #include< ...

  6. 20. javacript高级程序设计-JSON

    1. JSON JSON是一种数据格式,存在以下三种类型的值: l 简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null,不支持 undefined,例如: ...

  7. 初识 MySQL 5.6 新功能、参数

    摘要: 继上一篇的文章 初识 MySQL 5.5 新功能.参数 之后,现在MySQL5.6 针对 MySQL5.5 各个方面又提升了很多,特别在性能和一些新参数上面,现在看看大致提升了哪些方面(后续不 ...

  8. FFmpeg-20160415-snapshot-bin

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 F ...

  9. Effective C++ -----条款22：将成员变量声明为private

    切记将成员变量声明为private.这可赋予客户访问数据的一致性.可细微划分访问控制.允诺约束条件获得保证,并提供class作者以充分的实现弹性. protected并不比public更具有封装性.

  10. Myeclipse常用快捷键

    转自:http://zjxbw.blog.51cto.com/2808787/543792 Ctrl+Shift+L    显示所有快捷键 Ctrl+K      参照选中的词(Word)快速定位到下 ...