手风琴

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        img{
            width: 500px;
            height: 300px;
        }
        #div1 div{
            height: 30px;
            overflow: hidden;
        }
    </style>
    <script>
        window.onload= function () {
            var div1=document.getElementById('div1');
            var adiv=div1.getElementsByTagName('div');

            for(var i=0;i<adiv.length;i++){
                 adiv[i].onmouseover= function () {
                     domove(this,'height',20,300);
                 };
                adiv[i].onmouseout= function () {
                    domove(this,'height',20,30);
                };
            }
            function domove(obj,attr,dir,itarget){
                dir=parseInt(getStyle(obj,attr))<itarget?dir:-dir;
                clearInterval( obj.timer);
                obj.timer=setInterval(function () {
                    var speed=parseInt(getStyle(obj,attr))+dir;
                    if(speed>itarget && dir>0){
                        speed=itarget;
                    }
                    if(speed<itarget && dir<0){
                        speed=itarget;
                    }
                    obj.style[attr]=speed+'px';
                    if(speed==itarget){
                        clearInterval(obj.timer);
                    }
                },30)
            }
            function getStyle(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj)[attr];
                }
            }
        };
    </script>
</head>

<body>
<div id="div1">
    <div>![](img/a.jpg)</div>
    <div>![](img/b.jpg)</div>
    <div>![](img/c.jpg)</div>
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券