jquery图片提示效果

来源：互联网发布：3d打印软件编辑：程序博客网时间：2024/05/16 05:30
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>超链接提示效果</title><script type="text/javascript" src="../plugins/lib/jquery/jquery-2.1.4.min.js" ></script><style>.reminder-wrap{    width: 100px;    height: 100px;}.reminder-wrap a{    position: relative;    display: block;}.reminder-wrap img{    display: block;    width: 100%;}</style></head><body><div class="reminder-wrap">    <a href="#" id="reminder" title="怒吼的猫咪"><img src="images/cat.png" /></a></div><script>$("#reminder").mouseover(function(e){    var imgReminder,imgPath,imgText,imgAlt;    imgPath = "images/cat.png";    this.myTitle = this.title;    this.title = '';    imgReminder = "<div id='imgReminder'><img src='"+ imgPath +"' /></div>";    $(this).append(imgReminder);    $(this).children("img").css({        "opacity":"0.5"    });    $("#imgReminder").css({        "position":"absolute",        "width":"300px",        "height":"300px",        "top":e.pageY + "px",        "left":e.pageX + "px"    });    imgText = "<div id='imgText'>"+this.myTitle+"</div>";    $("#imgReminder").append(imgText);    $("#imgText").css({        "position":"absolute",        "width":"100%",        "height":"40px",        "left":"0",        "bottom":"0",        "background":"rgba(0,0,0,0.7)",        "color":"#ffffff",        "text-align":"center",        "line-height":"40px"    });}).mouseout(function(){    $("#imgReminder").remove();    $(this).children("img").css({        "opacity":"1"    });    this.title = this.myTitle;}).mousedown(function(e){    $("#imgReminder").css({        "top":e.pageY + "px",        "left":e.pageX + "px",    });});</script></body></html>
结果如图：
这里写图片描述
1 0