jQuery文字提示与图片提示效果实现方法

前端之家收集整理的这篇文章主要介绍了jQuery文字提示与图片提示效果实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery文字提示图片提示效果实现方法分享给大家供大家参考,具体如下:

1.效果如图:

2.文字提示代码

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" }); }); }) //]]>

3.图片提示代码

SEOver(function(e){ this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle? "
" + 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

猜你在找的jQuery相关文章