会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
kensonwang
博客园
::
首页
::
博问
::
闪存
::
新随笔
::
联系
::
订阅
::
管理
::
公告
当鼠标放在链接上面时弹出一个层
使用javascript实现当鼠标放在链接上面时弹出一个层或图片的效果。
<
HTML
>
<
HEAD
>
<
TITLE
>
New Document
</
TITLE
>
<
script
type
="text/javascript"
>
//
在鼠标显示一个层,该层的内空为div2的内容
function
showTip()
{
var
div3
=
document.getElementById('div3');
//
将要弹出的层
div3.style.display
=
"
block
"
;
//
div3初始状态是不可见的,设置可为可见
//
window.event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状.
//
clientX是鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
div3.style.left
=
event.clientX
+
10
;
//
鼠标目前在X轴上的位置,加10是为了向右边移动10个px方便看到内容
div3.style.top
=
event.clientY
+
5
;
div3.style.position
=
"
absolute
"
;
//
必须指定这个属性,否则div3层无法跟着鼠标动
var
div2
=
document.getElementById('div2');
div3.innerHTML
=
div2.innerHTML;
}
//
关闭层div3的显示
function
closeTip()
{
var
div3
=
document.getElementById('div3');
div3.style.display
=
"
none
"
;
}
//
控制层div2显示的开关
function
switchDIV()
{
if
(div2.style.display
==
'block')
{
div2.style.display
=
'none';
}
else
{
div2.style.display
=
'block';
}
}
</
script
>
</
HEAD
>
<
BODY
>
<
a
href
="#"
onmousemove
="showTip()"
onmouseout
="closeTip()"
onclick
="switchDIV()"
>
链接
</
a
>
<
div
id
="div2"
style
="display:none;background-color:green"
>
<
h4
color
="blue"
>
我是在div2里面的一句话!
</
h4
>
</
div
>
<
div
id
="div3"
style
="display:none;background-color:beige;width:250;height:50"
>
</
div
>
</
BODY
>
</
HTML
>
posted on
2007-06-28 17:31
Kenson
阅读(
1407
) 评论(
1
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部