这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

jQuery实现鼠标划过展示大图的方法的更多相关文章

  1. jQuery制作鼠标经过显示图片大图，生成图片tips效果

    一般tips都是文字,这个可以支持图片,很漂亮: 演示   <script type="text/javascript"> // Load this script on ...

  2. jQuery实现鼠标悬停显示提示信息窗口的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 关闭myeclipse中烦人的鼠标划过,自动提示功能

    eclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!! 都知道,使用myeclips ...

  4. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  5. 鼠标划过图片title 提示实现

    鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  7. 【前端图表】echarts散点图鼠标划过散点显示信息

    在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...

  8. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  9. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. Max Sum Plus Plus---hdu1024（动态规划求M段的最大和）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1024 题意就是有n个数分成m段,求最大的和: dp[i][j]表示把 j 个数分成 i 段,选择第 j ...

  2. receive.denyCurrentBranch 推送错误解决

    场景: 1.搭建Ok了一git服务器 2.本机上的现有源码,现在想纳入git源码管理 操作: 1.服务器上创建了工程仓库 git init 2. 客户端使用tortoisegit添加并提交要纳入源码管 ...

  3. MongDb的安装

    MongoDB是一个基于分布式文件存储的数据库,由c++语言编写,为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB属于非关系数据库,也不能说完全属于,更像是介于关系数据库和非关系数据库之 ...

  4. redhat 5的中文包安装

    中文包文件名.在iso文件的/server/文件夹下fonts-chinese-3.02-9.6.el5.noarch.rpmfonts-ISO8859-2-75dpi-1.0-17.1.noarch ...

  5. Q_OBJECT宏的作用

    The Q_OBJECT macro at the beginning of the class definition is necessary for all classes that define ...

  6. ACM-ICPC 2018 沈阳赛区网络预赛 Solution

    A. Gudako and Ritsuka 留坑. B. Call of Accepted 题意:定义了一种新的运算符$x d y$ 然后给出中缀表达式,求值 思路:先中缀转后缀,然后考虑如何最大如何 ...

  7. 日志处理(二) 日志组件logback的介绍及配置使用方法(转)

    本文转自:http://www.cnblogs.com/yuanermen/archive/2012/02/13/2348942.html http://www.cnblogs.com/yuanerm ...

  8. Git冲突：commit your changes or stash them before you can merge. 解决办法

    用git pull来更新代码的时候,遇到了下面的问题: 1 2 3 4 error: Your local changes to the following files would be overwr ...

  9. springcloud13---zuul

    Zuul:API  GATEWAY (服务网关): http://blog.daocloud.io/microservices-2/ 一个客户端不同的功能请求不同的微服务,那么客户端要知道所有微服务的 ...

  10. HDU4642

    #include<stdio.h> #include<string.h> int main() { int i,j,n,m; int t; scanf("%d&quo ...