<body>
<img src="https://hotel.easy8688.com/uploads/admin/admin_thumb/20190111/6073dae795ae13671a46eca124721f2e.jpg" style="cursor:pointer" class="tooltip" width="20" height="20">
<!-- 引入jquery依赖 -->
<script src="//unpkg.com/[email protected]/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- jq实现代码 -->
<script type="text/javascript" charset="utf-8">
$(function(){
var x = 10;
var y = 20;
$(".tooltip").mouseover(function(e){
var tooltip = "<div id='tooltip'><img src='"+ this.src +"' alt='产品预览图' height='200'/>"+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
</body>
本文链接:https://www.23thi.com/207.html
除非特殊声明,本站文章均为原创,转载请务必保留本文链接