常州网络公司首页 >>> WEB编程 >> JAVASCRIPT & AJAX

跟随鼠标的提示信息

发布时间:2010-6-29 21:44:52   浏览次数:6352

普通ALT或TITLE提示信息不会跟着鼠标移动而移动,那怎么怎样使提示信息会跟着鼠标动呢?

方法:

<script type="text/javascript">
document.write("<div id='pup' style='position:absolute; border: 1px solid #8CBAE4;z-index:1;color:#000000;background-color: #F2F9FF;overflow: visible;visibility: hidden;font-size:11px;font-family:Verdana;padding:6px;padding-left:9px;padding-right:18px;text-align: left;line-height:180%'></div>")

function showpup(str)
{
  var x=event.x;
  var y=event.y;
  pup.innerHTML=str;
  pup.style.visibility="visible";
  pup.style.left=x+10;
  pup.style.pixelTop=y+document.body.scrollTop+10;
}

function hidepup()
{
  pup.style.innerHTML=""
  pup.style.visibility="hidden";
}
</script>

调用 :

<a href='#' target='_blank' onMouseMove="showpup('<b>提示文字:</b><br>1.文字一<br>2.文字二')" onMouseOut='hidepup()'>ALT文字移动</a>

如果是图片,也是同样的方法。

上一条:图片局部放大效果,图片放大镜效果
下一条:JS图片切换效果
首页 | 在线留言 | 网站地图

CopyRight ©2008-2014   糊涂蛋技术网    苏ICP备05013073号
站长:万创   QQ:54960248  E-mail:xlxcn#126.com