当前位置：首页 → 问答吧 → jquery如何实现这种效果？谢谢大家的帮忙

jquery如何实现这种效果？谢谢大家的帮忙

时间：2009-09-24

来源：互联网

这里是CSDN上面的截图，其实其他也有这样的效果出现。暂以这个为例：

页面上面有3个标签，效果如下：当鼠标移动到标签上面的时候，显示截图的效果（看了人家的代码是隐藏在页面上的。）

效果图

我的思想是：获取到每个表情的位置：top left ，然后根据每个标签的id去找对应的下拉菜单。然后设置下拉菜单的位置：top===原来的top+表情的height， left===left；

但是我出现了两个问题：

1.鼠标移出标签并且在它下拉菜单里面，此时下拉菜单不消失；但是当鼠标移出标签并且不在它所对应的下拉菜单里面，此时下拉菜单消失。我没有完成这个功能 ⊙﹏⊙

2.每个标签所对应的下拉菜单要与标签的边框下要正好吻合，如图效果。（这里里面好像与相对位置有点关系，我猜想。）

大家给点建议。谢谢大家的帮忙。可能有的地方说的有点乱。呵呵

谢谢

[ 此帖被haibin666在2009-09-25 10:48重新编辑 ]

作者: haibin666 发布时间: 2009-09-24

第二个问题没看懂
<style type="text/css">
               .child{
                   position:absolute;
                display:none;
                width:100px;
                background-color:#00ffff;
               }
            .menu{
                background-color:#0080ff;
                float:left;
                width:50px;
                text-align:center;
                margin:0 5px 0 0;
                cursor:pointer;
            }
           </style>
$(function(){
                $('#menu div').hover(function(){
                    var menuOffset=$(this).offset();
                    $('#child').css({
                        top:menuOffset.top+$(this).height(),
                        left:menuOffset.left
                    }).show().hover(function(){
                        $(this).show();
                    },function(){
                        $(this).hide();
                    });
                },function(){
                    $('#child').hide();
                });
            });
    <body>
        <div id="child" class="child">
            aaaaaa<br>
            bbbbbb
        </div>
        <div id="menu">
            <div id="menu1" class="menu">标签1</div>
            <div id="menu2" class="menu">标签2</div>
        </div>
    </body>

作者: ziyou 发布时间: 2009-09-24

哎呀妈呀，老感谢你了，朋友。要的就是这个效果。

谢谢朋友~~~~~