jQuery关门动画效果

最新推荐文章于 2022-05-09 18:21:40 发布

BowenXu11

最新推荐文章于 2022-05-09 18:21:40 发布

阅读量176

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/BowenXu11/article/details/105814965

版权

Jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.0.js"></script>
    <script type="text/javascript">
        $(function () {
   
            $('input[name=name]').click(function () {

                $('#test').CloseDoor(5);
               
            });
            $('input[name=hide]').click(function () {
                $('#test').OpenDoor(5);
            });

            //上下同时关门效果
            //1.div标签内容永远上下居中 （父元素要有line-height，然后子元素要display成inline-block）
            $.fn.CloseDoor = function (time) {
                //动态生成一个占位层
                $('<div id="perchDiv" style="height:' + $(this).height() + 'px"></div>').insertAfter(this);
                var closeTarget = $(this);
                //设置本层和包裹层的相对定位
                closeTarget.css('position','absolute').children().first().css('position', 'relative');
                //2.减少高度的同时，绝对定位跟随
                var childtop = 0;
                var intervalid = window.setInterval(function () {
                    if (closeTarget.height() > 0) {
                        childtop -= 1;
                        //一边移动图片，一边移动层，一边缩小层
                        closeTarget.css({ 'height': (closeTarget.height() - 2) + 'px', 'top': (closeTarget.offset().top + 1) + 'px' }).children().css('top', childtop +'px');
                    }
                    else {
                        window.clearInterval(intervalid);
                        //隐藏占位层
                        closeTarget.next().remove();
                        
                    }
                }, time);
                
            };
            $.fn.OpenDoor = function (time) {

                var closeTarget = $(this);
                closeTarget.css('display', 'relative').children().first().css('display', 'relative');
                //建立一个占位层
                $('<div id="perchDiv" style="height:' + $(this).children().first().height() + 'px"></div>').insertAfter(this);
              
             //开关门效果里面，所有的子元素必须放在一个层里面包裹起来，因为要用到相对定位
                var childtop = Number( $(this).children().first().css('top').match(/[-]*\d+/)[0]);
                var intervalid = window.setInterval(function () {
                    if (closeTarget.height() <= $(this).children().first().height()) {
                      
                        childtop += 1;
                        closeTarget.css({ 'height': (closeTarget.height() + 2) + 'px', 'top': (closeTarget.offset().top - 1) + 'px' }).children().css('top', childtop + 'px');
                    }
                    else {
                        closeTarget.next().remove();
                        //清空css设置
                        closeTarget.css({ 'position': '', 'height': '', 'top': '' }).children().first().css({ 'position': '', 'top': '' });
                        //停掉计时器
                        window.clearInterval(intervalid);
                        
                    }
                }, time);

            };
            
        });
    </script>
    <style type="text/css">

        #test {
      
        overflow:hidden;
        
        
         }

        
     
    </style>
    
</head>
<body>
    <input type="button" name="name" value="开始" /><input type="button" name="hide" value="隐藏" />
                                                  <input type="button" name="oneBtnCtrl" value="一键控制" />
    <div id="test">
        <div id="firstChild">  <img src="img/1.jpg" /> </div>
       
    </div>
    
    <div> 1223456</div>
   
</body>
</html>

BowenXu11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery关门动画效果

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.5.0.j...
复制链接

扫一扫

专栏目录