ToolTip.js 的使用介绍

• 首先在页面引入jquery.js和ToolTip.js

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script language="javascript" src="js/ToolTip.js"></script>

• 其次是页面结构 给图片添加 class popimg

 <div class="thumbnail_outer_img" ><div  class="thumbnail_inner_img" ><div class="thumbnail_current_img" >        <img class="suspend_img" src='http://www.0-fashion.com/Content/UploadFiles/Products/20170321/p_s_1600056043.jpg' >    </div></div></div>

• 然后是页面css样式

     <style>        .thumbnail_outer_img{            position: relative;            width: 60px;            height: 60px;            margin: 0 auto;            border: 1px solid red;        }        .thumbnail_inner_img {            left: 0;            padding: 2px;            position: absolute;            height: 90%;            overflow: hidden;        }        .thumbnail_current_img{            max-width: 60px;            margin: 0 auto 0 auto;            position: relative;            padding-bottom: 60px;            height: 0;            overflow: hidden;        }        .thumbnail_current_img img {            width: 100%;        }    </style>

• 最后是方法 popimg 添加鼠标事件

$(document).on("mouseover", ".suspend_img", function () {        var imgsrc= $(this).attr("src");        if (this.tagName == "IMG") {            var strImg = "<img src=" + this.src + " style='width:200px;'>";            toolTip(strImg);            //  console.log(this.src);        } else {            $(this).find("img").each(function () {                var strImg = "<img src=" + this.src + " style='width:200px;'>";                toolTip(strImg);            });        }    }).on("mouseout", function () {      $("body").find("#toolTipLayer").hide();    });