超链接提示效果:
. 代码如下:
<script type="text/javascript">
//<![cdata[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouver(function(e){
this.mytitle = this.title;
this.title = "";
var tooltip = "<p id='tooltip'>"+ this.mytitle +"<\/p>"; //创建 p 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pagey+y) + "px",
"left": (e.pagex+x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
this.title = this.mytitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pagey+y) + "px",
"left": (e.pagex+x) + "px"
});
});
})
//]]>
</script>
图片提示效果:
. 代码如下:
<script type="text/javascript">
//<![cdata[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.mytitle = this.title;
this.title = "";
var imgtitle = this.mytitle? "<br/>" + this.mytitle : "";
var tooltip = "<p id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgtitle+"<\/p>"; //创建 p 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pagey+y) + "px",
"left": (e.pagex+x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
this.title = this.mytitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pagey+y) + "px",
"left": (e.pagex+x) + "px"
});
});
})
//]]>
</script>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!
网友评论