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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
jQuery length 和 size()区别总结
2018/04/26 jQuery
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript