功能说明:当鼠标经过某个标志时 出现下面的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>