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

这篇文章主要介绍了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程序设计有所帮助。

转载于:https://www.cnblogs.com/zxtceq/p/5403469.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396269.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

精通java益处_你真的精通Java吗?

简历和自我介绍上经常能够读到“精通Java”这样的话&#xff0c;有人和我说&#xff0c;精通Java的人太多了&#xff0c;精通Java已经不能算亮点、不能给自己加分了。可是事实真是这样吗&#xff1f;对于语言的学习&#xff0c;我有一种观点&#xff0c;一是纵向&#xff0c;即…

Luogu P2101 命运石之门的选择(分治+搜索)

P2101 命运石之门的选择 题意 题目描述 在某一条不知名世界线的冈伦今天突然接到了一条\(dmail\)&#xff0c;上面说世界线将会发生巨大变动&#xff0c;未来的他无论如何都无法扭转这种变动回到原来的世界线。而世界线变动的原因是现在的他不久后错过了与助手的约会。他约好要…

Java初级笔记-第五章

第五章 面向对象的特点 5.1 继承 面向对象的重要特点之一就是继承。类的继承使得能够在已有的类的基础上构造新的类&#xff0c;新类除了具有被继承类的属性和方法外&#xff0c;还可以根据需要添加新的属性和方法。继承有利于代码的复用&#xff0c;通过继承可以更有效地组织程…

取模运算性质_求余、取模运算在RTOS中计算优先级的理解

uCOS3中的部分源码&#xff1a;/* 置位优先级表中相应的位 */void OS_PrioInsert (OS_PRIO prio){CPU_DATA bit;CPU_DATA bit_nbr;OS_PRIO ix;/* 求模操作&#xff0c;获取优先级表数组的下标索引 */ix prio / DEF_INT_CPU_NBR_BITS;//32bits//由于数据均为无符号数,prio为8位…

归结原则_被聘为自由职业者归结为一件事:信任。

归结原则by I quit Medium我退出Medium 被聘为自由职业者归结为一件事&#xff1a;信任。 (Getting hired as a freelancer comes down to one thing: trust.) When I ask freelancers what they think is the most important factor in landing a client project, they usual…

关于JS的传递方式的小理解

var test function() {//将其看成是创建了一个对象alert(1);}var otherTest test;//赋值导致test和otherTest指向同一个对象otherTest();test.sd 9;//对对象进行操作&#xff0c;两者都发生改变alert(otherTest.sd);//9var test function() {//test重新创建了一个对象&…

java p代表哪种数据类型_java数据类型(八种基本数据类型+三种引用类型)

1、整型类型 占用字节 取值范围byte 1 -128~127 (7次方)short 2 -32 768~32 767 (15次方)int …

python中的随机函数

python--随机函数&#xff08;random,uniform,randint,randrange,shuffle,sample&#xff09; 本文转载自:[chamie] random() random()方法&#xff1a;返回随机生成的一个实数&#xff0c;它在[0,1)范围内 运用random()方法的语法&#xff1a; import random #random()方法不…

Setuptool+pip安装

https://pypi.python.org/pypi/setuptools 1. 下载ez_setup.py文件&#xff0c;cmd进入安装目录&#xff1b; 2. python setup.py install https://pip.pypa.io/en/latest/index.html 1、cmd进入ez_setup.py文件目录2、用setuptools安装&#xff1a;easy_install pip转载于:htt…

rss 阅读源_如何使用RSS更有效地阅读

rss 阅读源by Naman Kamra通过纳曼卡姆拉(Naman Kamra) 如何使用RSS更有效地阅读 (How to read more efficiently with RSS) Rich Site Summary (RSS) was developed way back in 1999 as a way to quickly subscribe to blogs and newspapers, back before tools like Twitte…

python 遍历usb设备_python程序员教你写脚本玩微信跳一跳,只要有耐心,你就是王者!...

温馨提示&#xff1a;微信已经开始检测分数异常高的情况了&#xff0c;请大家不要跑太高哦游戏模式这是一个 2.5D 插画风格的益智游戏&#xff0c;玩家可以通过按压屏幕时间的长短来控制这个「小人」跳跃的距离。可能刚开始上手的时候&#xff0c;因为时间距离之间的关系把握不…

一个电脑同时运行 64bit 和 32bit 的eclipse 如何匹配 jdk环境

一个电脑同时运行 64bit 和 32bit 的 eclipse 如何匹配 jdk环境 1 eclipse 分 64bit 和 32bit 两种. 64bit的eclipse 只能搭配 64bit的 jdk 使用. 32bit的eclipse 只能搭配 32bit的 jdk 使用. 2 电脑上安装好 32bit 和 64bit 的 jdk ,分别安装在不同的路径中. 比如我的3…

基本数据类型(dict)

目录: 1.字典的简单介绍 2.字典增删改查和其他操作 3.字典的嵌套 一.字典的简单介绍 字典(dict)是python中唯一的一个映射类型,他是以{}括起来的键值对组成,在dict中key是唯一的,在保存的时候,根据key类计算出一个地址然后将key-value保存在这个地址中这种算法被称作hash算法,所…

自学成才翁_仅因为您是自学成才,并不意味着您必须独自学习。

自学成才翁by Piotr Bakker皮特巴克(Piotr Bakker) 仅因为您是自学成才&#xff0c;并不意味着您必须独自学习。 (Just because you’re self-taught doesn’t mean you have to learn alone.) I am a self-taught designer with no formal training. No art school, no priva…

java 近似值 循环次数,java题求解

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼public class PAI{public static void main(String[] args){int n 700;//Hello World! pai 3.1401640828900845(n 700)System.out.println("Hello World! pai " getPAI(n));//Hello World! pai 3.1430191863875865…

jq匹配偶数行_jquery怎么实现奇偶行不同背景颜色?

做表格的时候&#xff0c;经常要让奇偶行显示不同背景色&#xff0c;一来使表格显得更美观&#xff0c;二来使同行数据查找更快捷方便。通常我们是怎么实现的呢&#xff1f;就是在每个tr标签上加css样式。代码如下所示&#xff1a;.odd {background-color:yellow;}.even {backg…

2016/4/19 ①单个文件上传 ②上传图片后 预览图片

1&#xff0c;f1.php <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body> <!-- 作业:在网上找上传图片预览的代码 上传服务器 再预览--> <fo…

Android项目里集成Cordova详解

2019独角兽企业重金招聘Python工程师标准>>> 一 安装nodejs二 cmd创建Android项目三 导入工程 运行一下四 调用插件五 Android studio环境下将CordovaLib作为依赖导入六 自定义插件七 java类中的一些问题八 在CordovaActivity中添加原生View组件 九 在Fragment里使用…

facebook移动端框架_2016年所有顶级移动应用均归Google或Facebook所有

facebook移动端框架Today Nielsen released their report about the most widely used mobile apps in 2016. The top 8 apps were all owned by just two corporations: Google and Facebook.今天&#xff0c;尼尔森发布了有关2016年使用最广泛的移动应用程序的报告。排名前8的…