<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

除非特殊声明，本站文章均为原创，转载请务必保留本文链接

© 允许规范转载
我 秦始皇 打钱