m0_38109735
月夜游人
2017-09-12 07:07
采纳率: 100%
浏览 1.5k

利用JS和CSS如何实现div1和具有滑动出场效果的div2互联?

假设图

要实现的效果:
初始化,div2不显示,只显示div1。鼠标进入div1,那么div2显示(出现效果为下拉动画jQuery中表现为($("#div2").slideDown(500);如果鼠标从div1进入div2,div2保持不变。如果鼠标离开div1并且不进入div2,div2消失(最好有缓慢消失效果)。如果鼠标从div2进入div1,div2不变(div2不产生任何变化);如果鼠标从div2离开并且不进入div1,div2消失(最好有缓慢消失效果($("#div2").slideUp(500)))

div1 和div2 是相互独立的,

原本想问的就是这个问题,上一个问题没有把关键点(具有动画效果)说清楚,给大家造成不便请谅解。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • qq_28039297
    qq305933616 2017-09-12 08:01
    已采纳

    html

     <div id="div1" style="background: aqua;width: 50px;height: 50px;">
    
                    </div>
                    <div id="div2" style="background: navy;width: 100px;height: 100px;"">
    
                    </div>
    

    js

     $("#div1").mouseenter(function(e){
                    $("#div2").slideDown(500);
                    $("#div1").mouseleave(function(e){
                        var array = new Array();
                        array.push($("#div1")[0]);
                        array.push($("#div2")[0]);
                        var flag = checkIn(e,array)
                        if (!flag) {
                            $("#div2").slideUp(500);
                        }
                    });
                    $("#div2").mouseenter(function(e){
                        $("#div2").mouseleave(function(e){
                            var array = new Array();
                            array.push($("#div1")[0]);
                            array.push($("#div2")[0]);
                            var flag = checkIn(e,array)
                            if (!flag) {
                                $("#div2").slideUp(500);
                            }
                        });
                    });
                });
                function checkIn(e,objs){
                    try {
                        console.log(objs.length);
                    } catch (e) {
                        alert(1);
                    }
    
                    var x = e.clientX;
                    var y = e.clientY;
                    for (i = 0; i < objs.length; i++) {
                        var obj = objs[i];
                        if (x > obj.offsetLeft && x < (obj.offsetLeft + obj.clientWidth) && y > obj.offsetTop && y < (obj.offsetTop + obj.clientHeight)) {
                            return true;
                        } else {
                        }
                    }
                    return false;
                }
    

    初始化隐藏效果我没写,你自己加上就好

    点赞 评论
  • qq_28039297
    qq305933616 2017-09-12 07:20

    那还不简单,给div1添加鼠标移动上去的事件,当鼠标移动上去的时候让div2下滑显示,同时给div1和div2添加鼠标离开事件,
    当触发div1鼠标离开的时候,判断如果鼠标在div2上就直接return,否则让div2上滑隐藏。
    当触发div2鼠标离开事件的时候,判断如果鼠标在div1上就直接return,否则让div2上滑隐藏

    点赞 评论
  • m0_38109735
    月夜游人 2017-09-12 07:30

    <!DOCTYPE html>




    互联
    <style>
        *{
            margin: 0;
            padding:0;
        }
        </style>
    



            <div id="da" style="width:300px;height: 200px;display: none;border:1px black solid">
    
            </div>
            <div>
    

    $("#xiao,#da").bind("mouseover",function () { $("#da").slideDown(1000); }) $("#all").bind("mouseleave",function () { $("#da").slideUp(500); });

    
    

    这是上次问题一个答主写的,我稍微改动了一下,但是不理想。如下图:
    div显示图

    我想的是当鼠标离开蓝色区域(仅仅包含div1和div2)就会消失,如果按照上面的话会有太多的冗余(表现为鼠标进入红色区域,div2也不会消失),该如何实现更改?

    点赞 评论
  • m0_38109735
    月夜游人 2017-09-12 12:56

    精简了一下
    qq305933616 答主的代码,再次表示感谢。

     <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
            <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript">
            </script>
        </head>
    
        <body>
            <div id="div1" style=" position:relative;top:1px;width: 80px;height: 50px;background-color: blue;">这是第一块</div>
            <div id="div2" style=" left:1px;top:200px;display:none;width: 120px;height:100px;background-color: orange;">这是第二块</div>
            <script>
                $(function() {
                    $("#div1").mouseenter(function() {
                        $("#div2").slideDown(500);
                    })
    
                    $("#div1").mouseleave(function(e) {
                        var x = e.clientX;
                        var y = e.clientY;
                        var div2w = $("#div2")[0].clientWidth;
                        var div2h = $("#div2")[0].clientHeight;
                        var div2l = $("#div2")[0].offsetLeft;
                        var div2t = $("#div2")[0].offsetTop;
                        if(x > div2l && x < (div2l + div2w) && y > div2t && y < (div2t + div2h))
                        ;
                        else
                            $("#div2").slideUp(300);
                    })
                    $("#div2").mouseleave(function(e) {
                        var x = e.clientX;
                        var y = e.clientY;
                        var div1w = $("#div1")[0].clientWidth;
                        var div1h = $("#div1")[0].clientHeight;
                        var div1l = $("#div1")[0].offsetLeft;
                        var div1t = $("#div1")[0].offsetTop;
                        if(x > div1l && x < (div1l + div1w) && y > div1t && y < (div1t + div1h))
                        ;
                        else
                            $("#div2").slideUp(300);
                    })
    
                })
            </script>
        </body>
    
    </html>
    
    点赞 评论

相关推荐