ToolTip.js 的使用介绍

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 = "this.src + " style='width:200px;'>";

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