Maison > interface Web > js tutoriel > 根据鼠标的位置动态的控制层的位置_javascript技巧

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

WBOY
Libérer: 2016-05-16 18:41:18
original
1156 Les gens l'ont consulté
复制代码 代码如下:

<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>
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal