这篇文章主要介绍了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. SprinBoot CLI 安装(Mac版)

    1. 安装 HomeBrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/instal ...

  2. curl命令踩的坑

    使用curl命令执行get请求,带多个参数: curl localhost:/user/binding/query?userId=&wrapperId=&from=test [] [] ...

  3. android 错误收集

    2. is not translated in Eclipse > Preference > Android > Lint Error Checking的Correctness: M ...

  4. 设置UCHome注册登陆退出的跳转页自定义

    UCHome 默认注册.登录成功后跳转到 http://www.xxx.com/home/space.php?do=home 退出后会跳转到站点的首页,即 http://www.xxx.com/hom ...

  5. Django之logging日志使用

    Logger模块 是python中用于便捷记录日志且线程安全的模块 使用logging模块记录日志涉及四个主要类: logger提供了应用程序可以直接使用的接口: handler将(logger创建的 ...

  6. 23TCP通信

    .pro 文件中加入:QT+=network 在Qt中实现TCP/IP服务器端通信的流程: 1.创建监听套接字,QTcpServer 2.将监听套接字设置为监听模式, listen 3.等待并接受客户 ...

  7. ng-深度学习-课程笔记-5: 深层神经网络(Week4)

    1 深度L层神经网络( Deep L-layer Neural network ) 针对具体问题很难判断需要几层的网络,所以先试试逻辑回归是比较合理的做法,然后再试试单隐层,把隐层数量当作一个超参数, ...

  8. 基于Policy Gradient实现CartPole

    http://chenrudan.github.io/blog/2016/09/04/cartpole.html 首页 分类 关于 归档 标签 基于Policy Gradient实现CartPole ...

  9. Java加密代码 转换成Net版

    java版本自己封装base64 package com.qhong; import java.io.UnsupportedEncodingException; import org.apache.c ...

  10. HDU 6354 Everything Has Changed（余弦定理）多校题解

    题意:源点处有个圆,然后给你m个圆(保证互不相交.内含),如果源点圆和这些原相交了,就剪掉相交的部分,问你最后周长(最外面那部分的长度). 思路:分类讨论,只有内切和相交会变化周长,然后乱搞就行了.题 ...