经典的鼠标滑过效果

HTML与JavaScript交互示例

最新推荐文章于 2025-11-28 04:56:28 发布

转载最新推荐文章于 2025-11-28 04:56:28 发布 · 1.5k 阅读

文章标签：

#javascript #null #flash #url #浏览器 #class

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文展示了一个使用HTML和JavaScript实现鼠标悬浮效果的例子。通过JavaScript动态调整元素位置，并展示了如何为表格单元格添加链接和事件处理程序来显示提示信息。

{
      url=event.srcElement.url
      taget=event.srcElement.taget
      if (url.match("javascript"

==null)  window.status=url
      td_X=event.srcElement.offsetLeft
      td_Y=event.srcElement.offsetTop
      menu.width=event.srcElement.scrollWidth+6
      menu.height=event.srcElement.scrollHeight
      }
}

function doOut(){
if (mouseon==0) {
td_X=mt.rows[0].offsetLeft
td_Y=mt.rows[0].offsetTop
}
}

function doClick(){
if (taget=="_blank"

window.open(url)

location.href=url
}
window.setInterval("scrollback()",1);

window.setInterval("doOut()",1000);

</script>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<style>
.trans_msg {cursor:hand;filter:progid

XImageTransform.Microsoft.Alpha( style=0,opacity=25) blendtrans(duration=.25);}
.b{color=#000066;cursor:hand}
.f{font-family:Arial;cursor

efault;font-size:12px}
</style>

</head>
<body>
<div  onmousemove="doOver()">
<table id=mt border="0" cellpadding="2" style="border-collapse: collapse;" bordercolor="#808080" class="f">
    <tr><td class=b url="javascript:alert('大家好')" taget="">+Hello!<td url="#" taget="_blank">World!!
    <tr><td class=b url="javascript:alert('我的邮箱:flash165@126.com')" taget="">+<b>联系我</b><td url="mailto:flash165@126.com" taget="_blank">flash165@126.com
    <tr><td class=b url="http://www.7gz.cn" taget="_blank">+七歌站长站<td url="javascript:alert(navigator.appVersion)" taget="">你的浏览器版本
    <tr><td class=b url="http://www.gziu.com" taget="_blank">+黑夜博客<td url="javascript:alert(navigator.appName)" taget="">你的浏览器名称
    <tr><td class=b url="javascript:alert('谢谢支持')" taget="">+谢谢支持
    <tr><td class=b url="#" taget="">+<b>修改:
    </b>
    <tr><td class=b url="#" taget="">+<b>黑夜 HeiYe </b>
</table>
</div>
</body>