2 m0 38109735 m0_38109735 于 2017.09.12 15:07 提问

利用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
qq_28039297   2017.09.12 16: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;
            }

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

m0_38109735
m0_38109735 好强,谢谢啦。
2 个月之前 回复
qq_28039297
qq_28039297   2017.09.12 15:20

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

m0_38109735
m0_38109735 谢谢,好像不太行,因为当触发div1鼠标离开的时候,是无法判断鼠标的位置在哪的,还是我理解有问题,可以看看代码吗?
2 个月之前 回复
m0_38109735
m0_38109735   2017.09.12 15: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
m0_38109735   2017.09.12 20: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>
Csdn user default icon
上传中...
上传图片
插入图片