本文实例讲述了jQuery文字提示与图片提示效果实现方法。分享给大家供大家参考,具体如下:
1.效果如图:
SEOver(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "
"+ this.myTitle +"<\/div>"; //创建 div 元素
$("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"
});
});
})
//]]>
SEOver(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "
" + this.myTitle : ""; var tooltip = "
" + this.myTitle : ""; var tooltip = "
"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"
});
});
})
//]]>
有效果:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
原文链接:https://www.f2er.com/jquery/47453.html