黑马程序员技术交流社区

标题: 怎样才能做到这种效果 [打印本页]
作者: paper    时间: 2017-3-22 22:24
标题: 怎样才能做到这种效果
显示出来的div出现的位置怎样定位（每次显示的位置不一样）？

附件上效果图

问题.gif (230.67 KB, 下载次数: 93)

问题.gif
作者: paper    时间: 2017-3-22 22:57
现在做出来的效果是图片上那样，当鼠标移入图片是，绿色的div显示出来（显示出来的位置都市固定的）。（还没有做出想要的效果 ...鼠标移入图片是，绿色的div显示出来，绿色div的位置不是固定的）

QQ截图20170322225029.png (195.1 KB, 下载次数: 78)

QQ截图20170322225029.png
作者: paper    时间: 2017-3-22 22:58
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
                .big{background: #ccc;margin: 50px auto;width: 600px;height: 300px;text-align: center;padding: 100px;}
                #div1{width: 128px;height: 128px;background: url(img/1.png);float: left;}
                #div2{width: 128px;height: 128px;background: url(img/2.png);float: left;}
                #div3{width: 128px;height: 128px;background: url(img/3.png);float: left;}
                #div4{width: 128px;height: 128px;background: url(img/4.png);float: left;}
                #div5{width: 128px;height: 128px;background: url(img/5.png);float: left;}
                #div6{width: 128px;height: 128px;background: url(img/6.png);float: left;}
                #change{width: 200px;height: 200px;background: green;display: none; float: right;}
        </style>
</head>
<body>
        <div class="big">
                <div id="div1"></div>
                <div id="div2"></div>
                <div id="div3"></div><br><br><br><br><br><br><br><br>
                <div id="div4"></div>
                <div id="div5"></div>
                <div id="div6"></div>
                <div id="change"></div>
        </div>
</body>
<script type="text/javascript">
                window.onload=function() {
                        var oDiv1=document.getElementById('div1');
                        var oDiv2=document.getElementById('div2');
                        var oDiv3=document.getElementById('div3');
                        var oDiv4=document.getElementById('div4');
                        var oDiv5=document.getElementById('div5');
                        var oDiv6=document.getElementById('div6');
                        var oDivC=document.getElementById('change');
                        function get(){
                                oDivC.style.display='block';
                        }
                        function Return(){
                                oDivC.style.display='none';
                        }
                        //添加移入事件
                        oDiv1.onmousemove=oDiv2.onmousemove=oDiv3.onmousemove=oDiv4.onmousemove=oDiv5.onmousemove=oDiv6.onmousemove=function(){
                                get();
                        }
                        //添加移出事件
                        oDiv1.onmouseout=oDiv2.onmouseout=oDiv3.onmouseout=oDiv4.onmouseout=oDiv5.onmouseout=oDiv6.onmouseout=function(){
                                Return();
                        }
                }
</script>
</html>
作者: Croatia    时间: 2017-3-22 23:14
我说下我的思路。。。（各位大佬别打脸，我也是萌新。。。）
移入图标生成div标签，div与图标的位置为相对关系，移出后删除div标签



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2