彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 新闻动态 > js实现div层缓慢收缩与展开的方法,jsdiv层展开

js实现div层缓慢收缩与展开的方法,jsdiv层展开

发布时间:2019-08-30 12:33编辑:新闻动态浏览(90)

    js实现div层缓慢收缩与展开的方法,jsdiv层展开

    本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下:

    这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错。不受内容约束,收缩与展开的速度是可以控制的,高度、循环时间也可以改。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>层收缩</title>
    <script type="text/javascript">
    var mh = 30;//高度
    var step = 1;//每次变化的量
    var ms = 10;//循环时间
    function toggle(o){
     if (!o.tid)o.tid = "_" + Math.random() * 100;
     if (!window.toggler)window.toggler = {};
     if (!window.toggler[o.tid]){
      window.toggler[o.tid]={
       obj:o,
       maxHeight:o.offsetHeight,
       minHeight:mh,
       timer:null,
       action:1
      };
     }
     o.style.height = o.offsetHeight + "px";
     if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);
     window.toggler[o.tid].action *= -1;
     window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );
    }
    function anim(id){
     var t = window.toggler[id];
     var o = window.toggler[id].obj;
     if (t.action < 0){
      if (o.offsetHeight <= t.minHeight){
       clearTimeout(t.timer);
       return;
      }
     }
     else{
      if (o.offsetHeight >= t.maxHeight){
       clearTimeout(t.timer);
       return;
      }
     }
     o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";
     window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );
    }
    </script>
    <style type="text/css">
    div.xx{
     border:solid 1px;overflow:hidden;
    }
    div.xx h5{
     border:solid 1px;border-width:0 0 1px;
     padding:0;margin:0;height:28px;
     line-height:30px;cursor:pointer;
     background:#eee;
    }
    </style>
    </head>
    <body>
    <div class="xx"><h5 onclick="toggle(this.parentNode)">点击此处层伸缩</h5>
    <p>Tomat6.0的配置视频教程,AVI电影格式,相当清淅了,比起图文版的教程更贴切,
    不会配置Tomcat的网友,你可不要错过哦,由于视频抓图挺麻烦的,
    试了多次还是抓了一个不太清淅的,大家将就吧。</p>
    </div>
    </body>
    </html>
    

    希望本文所述对大家的javascript程序设计有所帮助。

    本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下:...

    js实现div层缓慢收缩与展开的方法

       本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下:

      这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错。不受内容约束,收缩与展开的速度是可以控制的,高度、循环时间也可以改。

      ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

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

    <title>层收缩</title>

    <script type="text/javascript">

    var mh = 30;//高度

    var step = 1;//每次变化的量

    var ms = 10;//循环时间

    function toggle(o){

    if (!o.tid)o.tid = "_" + Math.random() * 100;

    if (!window.toggler)window.toggler = {};

    if (!window.toggler[o.tid]){

    window.toggler[o.tid]={

    obj:o,

    maxHeight:o.offsetHeight,

    minHeight:mh,

    timer:null,

    action:1

    };

    }

    o.style.height = o.offsetHeight + "px";

    if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);

    window.toggler[o.tid].action *= -1;

    window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );

    }

    function anim(id){

    var t = window.toggler[id];

    var o = window.toggler[id].obj;

    if (t.action < 0){

    if (o.offsetHeight <= t.minHeight){

    clearTimeout(t.timer);

    return;

    }

    }

    else{

    if (o.offsetHeight >= t.maxHeight){

    clearTimeout(t.timer);

    return;

    }

    }

    o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";

    window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );

    }

    </script>

    <style type="text/css">

    div.xx{

    border:solid 1px;overflow:hidden;

    }

    div.xx h5{

    border:solid 1px;border-width:0 0 1px;

    padding:0;margin:0;height:28px;

    line-height:30px;cursor:pointer;

    background:#eee;

    }

    </style>

    </head>

    <body>

    <div class="xx"><h5 onclick="toggle(this.parentNode)">点击此处层伸缩</h5>

    <p>Tomat6.0的配置视频教程,AVI电影格式,相当清淅了,比起图文版的教程更贴切,

    不会配置Tomcat的网友,你可不要错过哦,由于视频抓图挺麻烦的,

    试了多次还是抓了一个不太清淅的,大家将就吧。</p>

    </div>

    </body>

    </html>

      希望本文所述对大家的javascript程序设计有所帮助。

    本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下: 这是一个层...

    本文由彩世界平台发布于新闻动态,转载请注明出处:js实现div层缓慢收缩与展开的方法,jsdiv层展开

    关键词:

上一篇:没有了

下一篇:没有了