小懒虫的技术博客

CSS:

<style type="text/css">
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
.img_s{border:none;}
audio{width:250px;margin-top:7px;}
</style>

HTML:

<table class="result-tab" width="100%">
    <tr>
        <th>ID</th>                            
        <th>缩略图</th>                            
        <th>路径</th>                            
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img class="img_s" src="upload/2017/05/22/76411495433869.jpg" height='40' width='250' title="盛开的菊科植物"/>										
        </td>
        <td>
            upload/2017/05/22/76411495433869.jpg
        </td>																							
    </tr>
</table>    		

JS:

$(function(){
	var x = 10;
	var y = 20;
	$("img.img_s").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"
						+ this.src 
						+"' alt='预览图' height='500' width='800'/>"
						+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show(500);	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
		this.title = this.myTitle;
		$("#tooltip").remove();	 //移除
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})

效果图:://wp.cpxiang.tech/wp-content/uploads/2017/05/@XYCJINXCVH39QJD7_Hjpg-1.jpg