获取网页的相对位置，可以让现实图片适配

功能说明：当鼠标经过某个标志时 出现下面的div 控件  

一：在body上添加一个div

<div>
        {
        <div class="RightBig" style="display:none ;height:252px;width:270px; border:0px solid #C8C9CB;background-color:#fff;border-radius:6px;>

</div>

二：一下脚本是经过标志，当鼠标 经过这个图片时，就会出现上面的div

  <div class="RightImgs" style="display:inline-block;padding:0 5px;">
                        <img src="@str1" style="height:25px; " class="RightImg1" />

</div>

三：js脚本

鼠标经过出发标志： 

注意：                    document.querySelectorAll(".RightBig")[0].style.top = RightImgs[0].offsetTop + 30 + 'px'; 是获取相对位置的，当电脑分别率不同是，显示的div在网页上的相对位置不会发生变化。

 <script>
                var RightImgs = document.querySelectorAll(".RightImgs");
                RightImgs[0].onmouseover = function () {
                    this.getElementsByClassName("RightImg1")[0].style.display = "none";
                    this.getElementsByClassName("RightImg2")[0].style.display = "";

                    //显示大图 - 定位大图
                    document.querySelectorAll(".RightBig")[0].style.display = "";
                    document.querySelectorAll(".RightBig")[0].style.top = RightImgs[0].offsetTop + 30 + 'px';
                    document.querySelectorAll(".RightBig")[0].style.left = (RightImgs[0].offsetLeft -247) + 'px';
                };

// 鼠标点击页面出发事件 点击后，div就消失  

 $("body").click(function ()
                {
                    this.getElementsByClassName("RightImg2")[0].style.display = "none";
                    this.getElementsByClassName("RightImg1")[0].style.display = "";
                    document.querySelectorAll(".RightBig")[0].style.display = "none";
                })

//鼠标离开时的出发的事件

RightImgs[0].onmouseout = function () {
                   this.getElementsByClassName("RightImg2")[0].style.display = "none";
                   this.getElementsByClassName("RightImg1")[0].style.display = "";
                    document.querySelectorAll(".RightBig")[0].style.display = "none";
                };

 </script>