首页 > 代码库 > 37、继续屏幕的定位

37、继续屏幕的定位

1、今天在公司加班,感觉好不开心

下面进入正题,要求是实现一个点击左侧的nav,然后一个div

  从当前鼠标的位置

  从左至右地滑出来

  纠结就在获取当前鼠标的位置,然后设置到,div的滑出点上

  当前鼠标的位置针对很好获取

  难就难在将其设置到div上,百度之后终于实现了,看了baidu真的是一个好东西呀

技术分享

这个button的代码如下所示

<!-- Team Group -->
                                    <li>
                                        <div class="list-left-title" onclick="asd(this)" onm ouseover="modify(this)" onm ouseout="modifys(this)">
                                            <strong>Team</strong> 
                                            <span><a class="icon-chevron-down"></a></span>
                                            <b onclick="alertBox(this)"><a class="icon-pencil" href="javascript:void(0);"></a></b>
                                        </div>
                                        <div class="list-left-content">
                                            <span>content</span>
                                        </div>
                                    </li>

js代码如下所示

function alertBox(obj){
    screenY = event.screenY;//通过事件对象获取鼠标相对于屏幕上边的距离,
    $("#alertModifyBox").css("top",screenY+$(document).scrollTop()+"px"); //由于设置了position:relative相对定位,所以这里的top是指对于父元素的位置
                                           //因此在这里还要加上页面向下滚动的距离
                                            //$(document).scrollTop(),最后别忘记加上"px"
$("#alertModifyBox").css("display","block"); $("#alertModifyBoxUl").css("display","block"); $("#alertModifyBox").animate({width:‘50%‘},400); $("#alertModifyBox").css("border","1px #ccc solid"); $("#alertModifyTitle").css("display","block"); }

实现效果就是下边这样,感觉好开森

技术分享

 

37、继续屏幕的定位