Rumah > hujung hadapan web > tutorial js > 根据鼠标的位置动态的控制层的位置_javascript技巧

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

WBOY
Lepaskan: 2016-05-16 18:41:18
asal
1147 orang telah melayarinya
复制代码 代码如下:

<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>
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan