这篇文章主要介绍了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. 原！上线遇到的问题， java序列化关键字transient 修饰的属性变成null了

    1.问题描述: 某个功能点,user对象 放入session,后再另外地方取出,结果某个字段没有了.再本地和测试环境都是ok的,但是线上环境就是不行. 后来看到这个user对象的那个属性是加了tran ...

  2. Supermarket---poj456（贪心并查集优化）

    题目链接:http://poj.org/problem?id=1456 题意是现有n个物品,每个物品有一个保质期和一个利润,现在每天只能卖一个商品,问最大的利润是多少,商品如果过期了就不能卖了: 暴力 ...

  3. qt——QFileDialog使用对话框选取本地文件

    QT在学习的过程中总是遇到各种问题,没有人解答,只有自己在研究并且在网上搜索一些资料,从初学到现在入门,一直都是这样走过来的,虽然走得很艰难,但是每一个阶段都会有所收获,最近在做一个图片浏览模块的功能 ...

  4. 如何在python3.5环境下安装BeautifulSoup？

    首先是安装: 1.到http://www.crummy.com/software/BeautifulSoup/网站上上下载 2.下载完成之后需要解压缩,假设放到D:/python下. 3.运行cmd, ...

  5. 第1章 1.10计算机网络概述--OSI参考模型和TCP_IP协议

    传输层负责将大数据文件分段,变成数据段. 网络层负责为小分段加上IP地址,变成数据包. 数据链路层负责将数包加上MAC地址和校验值,变成数据帧. TCP/IP协议是一群协议.不只是2个协议.

  6. （2.3）DDL增强功能-流程化控制与动态sql

    1.流程控制 在T-SQL中,与流程控制语句相关的关键字有8个: BEGIN...END BREAK GOTO CONTINUE IF...ELSE WHILE RETURN WAITFOR 其实还可 ...

  7. MySQL多个相同结构的表查询并把结果合并放在一起的语句（union all）

    union all select *,'1' as category from table1001 where price > 10 union all select *,'2' as cate ...

  8. DOM2和DOM3读书笔记

    二刷<高程>做的笔记,没什么技术含量就不发到首页啦!~DOM1级主要定义HTML和XML文档底层结构,DOM2和DOM3在这个结构基础上引入更多交互能力,也支持更高级的XML特性.DOM2 ...

  9. Selenium之IE浏览器的启动

    1.下载IEDriverServer.exe文件放至需要的目录中: 2.编写代码 import org.openqa.selenium.WebDriver; import org.openqa.sel ...

  10. hdu5091 线段树

    题意: 给了n个点在平面中 n<10000  然后 将这给了一个 宽为W 高为 H 的 矩形, 然后 使得这个矩形可以 涵盖最多的点有多少个,然后矩形的宽平行x 轴高平行y轴.可以将该矩形 水平 ...