这篇文章主要介绍了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. Windows中杀死某个端口的进程

    最近写项目,总是出现端口被占用的问题,原来傻傻的把电脑重启一下,终于有一天受不了了,想要想办法解决.刚开始从网上找了好多教程,发现不行.开始自己尝试,终于,成功的将占用端口的进程杀掉.在此记录下过程( ...

  2. python 面向对象 isinstance

    查看某个对象是否 这个类实例 是返回True 否则返回False class Foo(object): pass obj = Foo() class Boo(object): pass print(i ...

  3. java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/mutable/ArrayOps;

    用Maven创建了一个spark sql项目,在引入spark sql jar包时引入的是: <dependency> <groupId>org.apache.spark< ...

  4. maven解决“Could not calculate build plan”问题

    错误提示如下:(eclipse+maven) Could not calculate build plan: Failure to transfer org.apache.maven.plugins: ...

  5. JavaScript性能优化小窍门汇总（含实例）

    在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...

  6. 安装WIN7时提示“缺少所需的CD/DVD驱动器设备驱动程序”

    同事机器重装Win7,先百度了一下不适合64bit,于是直接上32bit系统. BOIS设置DVD启动,把安装盘放在移动光驱里,开始安装. 在安装时出现下图错误:“缺少所需的CD/DVD驱动器设备驱动 ...

  7. MySQL备份与恢复-mysqldump备份与恢复

    这片博文主要用来介绍MySQL的备份与恢复: MySQL的备份形式可以分为如下几种: 热备----即不停机备份 冷备----需要关闭MySQL,然后备份其数据文件.(停机备份一般是直接拷贝其datad ...

  8. jQuery获取不到隐藏DIV的高度和宽度

    今天做公司订单系统的修改,有同事将订单维护的四个部分拆成了四个小的tab页,由于数据表格时动态加载,所以表格的高度是动态变化的,可不知怎么,先点哪个哪个的高度就正常,其他的都是最小值,这下蒙了,这个找 ...

  9. 20145204《Java程序设计》第10周学习总结

    网络编程 网络编程:在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴.在发送和接收数据时,大部分的程序设计 ...

  10. POJ2533_Longest Ordered Subsequence （线性动态规划变形）

    本题求一个字符串中的最长递增子序列的长度. 动态规划方程 a[]记录字符串: d[i]记录以第i个元素为最后一个元素的最长递增序列的长度 则 d[i+1]=1+max(d[j])  其中(j<i ...