利用jQuary实现文字浮动提示效果示例代码

Javascript教程 2025-08-19

复制代码代码如下:

< html >

< head >

< meta charset="utf-8"/ >

< script type="text/javascript" src="script/jquery-1.4.2.min.js" >< /script >

< script >

/*文字提示*/

/*

(1)鼠标移入的时候,创建一个div它的内容是title属性的值

(2)规定位置,设置css样式

(3)鼠标移出的时候,移除div

(4)鼠标移动的时候,X Y轴的坐标要相应的变化

*/

$(function(){

var x = 7;

var y = 8;

$("a.tip").hover(function(){

var title = this.title;

var $div = $("< div id='newTip' >"+title+"< /div >");

$("body").append($div);

$div.css({"position":"absolute","background":"pink"});

},function(){

$("#newTip").remove();

}).mousemove(function(e){

var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'});

});

})

< /script >

< /head >

< body >

< a href="#" >这是我的提示< /a >

< /body >

< /html >