php鼠标悬停显示图片,鼠标滑过出现预览的大图提示效果
當(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)題。
- 上一篇: 【OpenGL4.0】GLSL渲染语言入
- 下一篇: alonedb.php on line