Home  >  Article  >  Web Front-end  >  根据鼠标的位置动态的控制层的位置_javascript技巧

根据鼠标的位置动态的控制层的位置_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:41:181089browse
复制代码 代码如下:

<script> <BR>var index=0; //鼠标第一次点击时候显示,鼠标再次点击将层不在显示 <BR>/** <BR>* 鼠标点击事件 <BR>*bizData:传递的参数 <BR>*/ <BR>function search(bizData) <BR>{ <BR>if(index==0) <BR>{ <BR>if(bizData==null) //当参数为空的时候该层内容清空,不让其显示null <BR>{ <BR>$("bizDiv").innerText = ""; <BR>$("bizDiv").style.background='#99FFFF'; <BR>document.onclick = mouseMove; <BR>index++; <BR>}else <BR>{ <BR>$("bizDiv").innerText = bizData; <BR>$("bizDiv").style.background='#99FFFF'; //相对的页面的颜色设置 <BR>document.onclick = mouseMove; //点击触发事件 <BR>index++; <BR>} <BR>}else{ //第二次鼠标点击 <BR>$("bizDiv").innerText = ""; <BR>document.onclick = mouseMove; <BR>$("bizDiv").style.background='transparent'; //将层的背景颜色设置为“透明色” <BR>index=0; <BR>} <BR>} <BR>/* <BR>*鼠标移动事件,获取层的top,right的位置 <BR>*/ <BR>function mouseMove(ev) <BR>{ <BR>ev= ev || window.event; <BR>var mousePos = mouseCoords(ev); <BR>$("bizDiv").style.right = document.body.clientWidth-mousePos.x+15; <BR>$("bizDiv").style.top = document.body.clientHeight-200; <BR>$("bizDiv").style.width='200'; <BR>//$("bizDiv").style.hight='200'; <BR>} <BR>/* <BR>*获取鼠标的位置 <BR>*/ <BR>function mouseCoords(ev) <BR>{ <BR>if(ev.pageX || ev.pageY){ <BR>return {x:ev.pageX, y:ev.pageY}; <BR>} <BR>return { <BR>x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, <BR>y:ev.clientY + document.body.scrollTop - document.body.clientTop <BR>}; <BR>} <BR></script>
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn