这篇文章主要介绍了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. HTTPS握手

    作用 内容加密 建立一个信息安全通道,来保证数据传输的安全: 身份认证 确认网站的真实性 数据完整性 防止内容被第三方冒充或者篡改 https的采用了对称加密和非对称加密.握手过程中采用非对称加密,得 ...

  2. 控制HttpContext为null

    直接new一个 HttpContextBase _HttpContext= new HttpContextWrapper(System.Web.HttpContext.Current);

  3. uchome 常用函数示例

    一.inserttable //添加数据 //前3个参数 $tablename插入的表名称 $insertsqlarr数据数组 $returnid是否返回插入ID function inserttab ...

  4. HTTP错误 404.17–Not Found 请求的内容似乎是脚本，因而将无法有静态文件处理程序来处理

    解决方案:切换应用程序池的模式.

  5. 自己主动检測&后台复制光盘内容

    原理:利用python的win32模块,注冊服务,让代码在后台执行,检測光盘并复制文件 启动的方法就是直接在cmd下,main.py install ,然后去windows 的服务下就能够看到The ...

  6. Underscore.js (1.7.0)-集合（Collections）(25)

    稽核函数(数组或对象) each_.each(list, iteratee, [context]) 别名: forEach 遍历list中的所有元素,按顺序用遍历输出每个元素.如果传递了context ...

  7. 鸟哥linux私房菜学习笔记，U盘安装centos5.3不能正常进入图形界面的问题

    前面说过自己成功引导了centos系统,现在进入启动界面,首次进入会进行相关设置,按照步骤一步一步完成,取消完光盘安装,点击下一步,就进入下面这个界面,没有登录框...没错!怎么蓝屏了,这可是linu ...

  8. Nodepad++ 资料整理

    http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/webhelp/use_sbracket_lite_autocomplete_ ...

  9. linux 常用命令总结(一)

    1. 字符串常用命令: 替换: 1). %s/*/*/g 中,替换当前界面的所有符合规则的内容.      2). 替换文件中的字符串内容: find -name '要查找的文件名' | xargs ...

  10. JS在if中的强制类型转换

    JS在if中的强制类型转换 众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是: 1.使用非严格相等进行比较,对==左边的值进行类型转换 2.在if判断时,括号内的值进行类型转换,转化为 ...