会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
sunfishlu
做好自己!永远都不要说放弃!
博客园
首页
新随笔
联系
订阅
管理
ToolTip(图片文字) with Jquery
当鼠标放在超链接上的时候,会出现图片和文字的tooltip。
效果图如下:
HTML代码:
Code
<
h1
>
ToolTip with Jquery
</
h1
>
<
p
>
把鼠标放在
<
a
href
="http://www.cnblogs.com"
class
="screenshot"
rel
="images/bky.jpeg"
>
博客园
</
a
>
上.
</
p
>
<
p
>
在
<
a
href
="http://www.cssglobe.com"
class
="screenshot"
rel
="images/bky.jpeg"
title
="博客园"
>
博客园
</
a
>
上移动鼠标试试.
</
p
>
javascript代码:
Code
this
.tooltipPreview
=
function
()
{
var
xOffset
=
10
;
var
yOffset
=
30
;
$(
"
a.screenshot
"
).hover(
function
(e)
{
this
.t
=
this
.title;
this
.title
=
""
;
var
c
=
(
this
.t
!=
""
)
?
"
<br/>
"
+
this
.t:
""
;
$(
"
body
"
).append(
"
<p id='screenshot'><img src='
"
+
this
.rel
+
"
' alt='url preview' />
"
+
c
+
"
</p>
"
);
$(
"
#screenshot
"
)
.css(
"
top
"
,(e.pageY
-
xOffset)
+
"
px
"
)
.css(
"
left
"
,(e.pageX
+
yOffset)
+
"
px
"
)
.fadeIn(
"
slow
"
);
}
,
function
()
{
this
.title
=
this
.t;
$(
"
#screenshot
"
).remove();
}
);
$(
"
a.screenshot
"
).mousemove(
function
(e)
{
$(
"
#screenshot
"
)
.css(
"
top
"
,(e.pageY
-
xOffset)
+
"
px
"
)
.css(
"
left
"
,(e.pageX
=
yOffset)
+
"
px
"
);
}
);
}
;
$(document).ready(
function
()
{
tooltipPreview();
}
)
posted @
2009-04-03 17:25
sunfishlu
阅读(
1468
) 评论(
1
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告