//图片缩放 $(document).ready(function () { var x = 30; var y = 20; var imgHeight = 0;//图片高度 $(document).on(‘mouseover‘, ‘img.tooltip‘, function (e) { var tooltip = "<div id=‘tooltip‘><img src=‘" + this.src + "‘ style=‘max-width:300px; max-height:300px;‘/><\/div>"; //创建 div 元素 $("body").append(tooltip); imgWidth = $("#tooltip").width(); imgHeight = $("#tooltip").height(); var scrLeft = e.originalEvent.x || e.originalEvent.layerX || 0; //把它追加到文档中 $("#tooltip").css({ "top": (e.pageY - imgHeight - y) < 0 ? 10 : (e.pageY - imgHeight - y) + "px", "left": scrLeft + x + "px" }).show("fast");//设置x坐标和y坐标,并且显示 }).on(‘mouseout‘, function () { $("#tooltip").remove(); //移除 }).on(‘mousemove‘, function (e) { var scrLeft = e.originalEvent.x || e.originalEvent.layerX || 0; $("#tooltip").css({ "top": (e.pageY - imgHeight - y) < 0 ? 10 : (e.pageY - imgHeight - y) + "px", "left": scrLeft + x + "px" }); }); });
<style type="text/css"> /* 图片放大tooltip */ #tooltip { position: absolute; border: 1px solid #eeeeee; background: #eeeeee; padding: 1px 1px 1px 1px; display: none; } </style>
<img src="src" class="tooltip" width="40" height="40"/>