jQuery实现鼠标划过展示大图的方法


Posted in Javascript onMarch 09, 2015

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

Javascript 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 #Javascript
jquery插件corner实现圆角边框的方法
Mar 09 #Javascript
jQuery中animate用法实例分析
Mar 09 #Javascript
深入探讨JavaScript String对象
Mar 09 #Javascript
jQuery实现冻结表头的方法
Mar 09 #Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 #Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php生成微信红包数组的方法
2019/09/05 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python 操作excel表格的方法
2020/12/05 Python
python中reload重载实例用法
2020/12/15 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
市场营销策划方案
2014/06/11 职场文书
详解Python类和对象内容
2021/06/22 Python
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL