首頁 > web前端 > js教程 > 根据鼠标的位置动态的控制层的位置_javascript技巧

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

WBOY
發布: 2016-05-16 18:41:18
原創
1156 人瀏覽過
复制代码 代码如下:

<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>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板