jQuery实现鼠标划过展示大图的方法

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery实现鼠标划过展示大图的方法。分享给大家供大家参考。具体如下：

这里用css和jquery实现鼠标移上元素时大图展示，并且大图不能溢出整个div框

复制代码 代码如下:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>jQuery鼠标划过展示大图</title>
<style type=\"text/css\">
* { margin:0; padding:0; }
body { font:12px/1.5 tahoma, arial, simsun; }
.wrap { position:relative; margin:0 auto; width:319px; height:243px; }
table { border-collapse:collapse; border-spacing:0; }
td { border:1px solid #ccc; background:#f0f0f0; width:80px; height:80px; }
td div { position:relative; width:100%; height:100%; background:#eee; }
td b { display:block; position:relative; z-index:20; width:20px; height:20px; background:#fff; }
td a.s { display:block; position:absolute; z-index:10; left:0; top:0; height:100%; width:100%; text-indent:-999em; overflow:hidden; background:url(Images/nb/8080logo.jpg) no-repeat; }
#hideBox { display:none; position:absolute; width:140px; height:120px; background:#fff; border:1px solid #333; z-index:300; }
#hideBox a { display:block; height:100%; width:100%; }
</style>
<script type=\"text/javascript\" src=\"js/jquery-1.4.4.min.js\"></script> 
<script type=\"text/javascript\">
    $(document).ready(function(){  
        var wrapWidth = $(\".wrap\").width();
        var wrapHeight = $(\".wrap\").height();
        var boxWidth = $(\"#hideBox\").outerWidth();
        var boxHeight = $(\"#hideBox\").outerHeight();       
        $(\"td a\").mouseover(function(){    
            var pos = $(this).parent(\"div\").position();
            var toLeft = wrapWidth - (boxWidth + pos.left);
            var toTop = wrapHeight - (boxHeight + pos.top);
            if(toLeft>0){
                    $(\"#hideBox\").css({left:pos.left});
            }
            else if(toLeft<0){
                    $(\"#hideBox\").css({left:wrapWidth-boxWidth});
            }
            if(toTop>0){
                    $(\"#hideBox\").css({top:pos.top});
            }
            else if(toTop<0){
                    $(\"#hideBox\").css({top:wrapHeight-boxHeight});
            }          
            $(\"#hideBox\").show();          
        });
        $(\"#hideBox\").mouseout(function(){
            $(this).hide();
        });    
    });
</script>
</head>
<body>
<div class=\"wrap\">
    <table>
        <tr>
            <td><div><b>15</b><a id=\"g1\" class=\"s\" href=\"#\">名称1</a></div></td>
            <td><div><b>16</b><a id=\"g2\" href=\"#\">名称2</a><br />
                    <a id=\"g3\" href=\"#\">名称3</a></div></td>
            <td><div><b>15</b><a id=\"g3\" class=\"s\" href=\"#\">名称1</a></div></td>
            <td><div><b>15</b><a id=\"g4\" class=\"s\" href=\"#\">名称1</a></div></td>
        </tr>
        <tr>
            <td><div><b>15</b><a id=\"g5\" class=\"s\" href=\"#\">名称1</a></div></td>
            <td><div><b>15</b><a id=\"g6\" class=\"s\" href=\"#\">名称1</a></div></td>
            <td><div><b>16</b><a id=\"g7\" href=\"#\">名称2</a><br />
                    <a id=\"g8\" href=\"#\">名称3</a></div></td>
            <td><div><b>16</b><a id=\"g9\" href=\"#\">名称2</a><br />
                    <a id=\"g3\" href=\"#\">名称3</a></div></td>
        </tr>
        <tr>
            <td><div><b>16</b><a id=\"g11\" href=\"#\">名称2</a><br />
                    <a id=\"g12\" href=\"#\">名称3</a></div></td>
            <td><div><b>16</b><a id=\"g13\" href=\"#\">名称2</a><br />
                    <a id=\"g14\" href=\"#\">名称3</a></div></td>
            <td><div><b>15</b><a id=\"g15\" class=\"s\" href=\"#\">名称1</a></div></td>
            <td><div><b>15</b><a id=\"g16\" class=\"s\" href=\"#\">名称1</a></div></td>
        </tr>
    </table>
    <div id=\"hideBox\"><a href=\"\">大图展示</a></div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/23705

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案