首页 > web前端 > js教程 > 正文

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

WBOY
发布: 2016-05-16 18:41:18
原创
1122 人浏览过
复制代码 代码如下:

<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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!