DIV悬浮效果

最新推荐文章于 2020-04-07 11:23:00 发布

原创最新推荐文章于 2020-04-07 11:23:00 发布 · 9.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #javascript

这篇博客介绍了一种实现图片点击后，一个悬浮的DIV窗口显示详细信息的方法。通过JavaScript函数`show(obj)`和`closeInforWin()`，当用户点击图片时，会显示一个定位在图片下方的iframe，展示更多内容。点击‘关闭’链接则隐藏悬浮窗。该效果利用了DOM操作和CSS定位来完成。

鼠标点击图片，根据图片信息及位置显示不同的DIV

HTML代码

 <img src="faces/image.jsp?type=1&product=1&area=1" onclick="show(this)"/>
 <div id="showInfor" style="visibility:hidden;position:absolute;
        border-width:1px; border-color:silver; border-style:solid;width:220px;">
    <div style="width:220px;height:20px;background-color:silver" >
     <a href="#" onclick="javascript:closeInforWin()" style="font-size:12px;">关闭</a>
    </div>
    <iframe frameborder="0" id="frInfor" style="background-color:rgb(234,236,240);width:220px;">           </iframe>
</div>

JavaScript代码

    function show(obj){
        var value = obj.src.replace("image.jsp","infor.jsp");
        var inforFr = document.getElementById("frInfor");
        inforFr.src = value;
        var left = obj.offsetLeft;
        var top = obj.offsetTop + 15;
        var inforDV = document.getElementById("showInfor");
        inforDV.style.visibility = "visible";
        inforDV.style.left = left;
        inforDV.style.top = top;
     }
     function closeInforWin(){
        document.getElementById("showInfor").style.visibility = "hidden";
     }