Heim > Web-Frontend > js-Tutorial > 利用jQuary实现文字浮动提示效果示例代码_jquery

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

WBOY
Freigeben: 2016-05-16 17:06:44
Original
1144 Leute haben es durchsucht
复制代码 代码如下:





<script> <BR>/*文字提示*/ <BR>/* <BR>(1)鼠标移入的时候,创建一个div它的内容是title属性的值 <BR>(2)规定位置,设置css样式 <BR>(3)鼠标移出的时候,移除div <BR>(4)鼠标移动的时候,X Y轴的坐标要相应的变化 <BR>*/ <BR>$(function(){ <BR>var x = 7; <BR>var y = 8; <BR>$("a.tip").hover(function(){ <BR>var title = this.title; <BR>var $div = $("<div id='newTip'>"+title+"</script>
");
$("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'});
});
})



这是我的提示


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage