Rumah > hujung hadapan web > tutorial js > jQuery实现图片信息的浮动显示实例代码_jquery

jQuery实现图片信息的浮动显示实例代码_jquery

WBOY
Lepaskan: 2016-05-16 17:24:17
asal
1079 orang telah melayarinya

如图:
jQuery实现图片信息的浮动显示实例代码_jquery 

复制代码 代码如下:






<script> <BR>$(function(){ <BR>var x = 10; <BR>var y = 20; <BR>$("a.tooltip").hover(function(){ <BR>var title = this.title; <BR>$("a.tooltip").attr("newTitle",this.title); <BR>this.title = ''; <BR>var $div = $("<div id='newTip'><img src='"+this.href+"'/ alt="jQuery实现图片信息的浮动显示实例代码_jquery" ><br/>"+this.newTitle+"</script>
");
$("body").append($div);
$div.css({"position":"absolute","background":"silver"}).show("fast");
},function(){
this.title = this.newTitle;
$("#newTip").remove();
}).mousemove(function(e){

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




  • 苹果 iPod

  • 苹果 iPod nano

  • 苹果 iPhone

  • 苹果 Mac




Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan