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

37、继续屏幕的定位

2024-08-17 13:42:30   220人阅读

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、继续屏幕的定位


联系
我们