當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，圖片會(huì)出現(xiàn)預(yù)覽的大圖，大圖下面還會(huì)有介紹文字。

.aa{

width:88px;

height :100px;

}

$(function () {

var x = 10;

var y = 20;

$("a.tooltip").mouseover(function (e) {

this.myTitle = this.title;

this.title = "";

var imgTitle = this.myTitle ? "
" + this.myTitle : "";

var tooltip = "

" + imgTitle + ""; //創(chuàng)建元素

$("body").append(tooltip); //將它追加到文本中

$("#tooltip")

.css({

"top": (e.pageY + y) + "px",

"left": (e.pageX + x) + "px"

}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示

}).mouseout(function () {

this.title = this.myTitle;

$("#tooltip").remove(); //移除

}).mousemove(function (e) {

$("#tooltip")

.css({

"top": (e.pageY + y) + "px",

"left": (e.pageX + x) + "px"

});

});

})

總結(jié)

以上是生活随笔為你收集整理的php鼠标悬停显示图片,鼠标滑过出现预览的大图提示效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。