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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 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
curl实现站外采集的方法和技巧
2014/01/31 PHP
php中stream(流)的用法
2014/03/25 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
python 连接各类主流数据库的实例代码
2018/01/30 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python中的句柄操作的方法示例
2019/06/20 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Django values()和value_list()的使用
2020/03/31 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
什么是Python包的循环导入
2020/09/08 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
C有"按引用传递"吗
2016/09/06 面试题
解释下面关于J2EE的名词
2013/11/15 面试题
2014年应急工作总结
2014/12/11 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书