<style type="text/css">
#tooltip {
position: absolute;
border: 0px solid #CCC;
display: none;
color: #FFF;
padding: 2px;
}
</style> <!-- 浮动框格式加载 -->
<a class="tooltip" target="_blank" href="<?php echo $r['cardpicture'];?>">
<image style="width:50px" src="<?php echo $r['cardpicture']; ?>">
</a> <!-- 创建图片链接以及图片显示。 -->
<script type="text/javascript">
//js加载
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) { //当a标签class类名为tooltip的标签被指向时
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).fadeIn(600); //设置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"
});
});
})
</script>