读书人

追随鼠标悬浮层实例

发布时间: 2012-10-13 11:38:17 作者: rapoo

跟随鼠标悬浮层实例

<script type="text/javascript">//在鼠标显示一个层,该层的内空为div2的内容function showTip2(){  var ipadTwo = document.getElementById('ipadTwo'); //将要弹出的层  ipadTwo.innerText="修改后的文字";  ipadTwo.style.display="block"; //div2初始状态是不可见的,设置可为可见  //window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.  //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。  ipadTwo.style.left=event.clientX+15; //鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容  ipadTwo.style.top=parseInt(event.y)+5+document.body.scrollTop;  ipadTwo.style.position="absolute"; //必须指定这个属性,否则div1层无法跟着鼠标动}//关闭层div2的显示function closeTip2(){  var ipadTwo = document.getElementById('ipadTwo');  ipadTwo.style.display="none";}</script><style type="text/css">#ipadTwo {    background: #FFF;    border: dashed 1px #dddddd;    opacity: 0.8; //    -moz-opacity: 0.8;    filter: alpha(opacity = 80);    padding: 5px;}</style><div id="ipadTwo" style="display:none;" />

?

读书人网 >Web前端

热点推荐