首页 > 代码库 > 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、继续屏幕的定位
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。