通过层DIV实现，当鼠标放在链接上面，显示图片及文字
层的位置是可改变、大小是可改变的、可见是可调的，这个就可以用于实现一些特殊的效果，如隐显、渐显等，
下面是一个鼠标事件的层操作，当鼠标放在上面的时候可以显示定位显示隐藏的层：
<HTML>
<body>
示例展示一：
<a href="www.sina.com" id="i" onmouseover="show(this,'m')" onmouseout="hide('m')">鼠标放在上面显示图片查看有边框的层</a>
<div id="m" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute" onmouseover="show(i,'m')" onmouseout="hide('m')">
<nobr>注：这个层是加了边框的</nobr><br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</nobr></a><br>
<a href="http://www.163.com">网易</a>
</div>
示例展示二：
<a href="www.sina.com" id="i1" onmouseover="show(this,'m1')" onmouseout="hide('m1')">鼠标放在上面显示图片查看没有边框的层</a>
<div id="m1" style="VISIBILITY:hidden;POSITION:absolute;background-image:url(http://p.blog.csdn.net/images/p_blog_csdn_net/xport/155656/o_Java.gif);" onmouseover="show(i1,'m1')" onmouseout="hide('m1')">
注：这个层没有边框但加了背景，写法就简单一点<br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</nobr></a><br>
<a href="http://www.163.com"><nobr>网易</nobr></a>
</div>
<script>
//显示
function show(o,obj){
var m=document.getElementById(obj);
m.style.pixelLeft=getL(o);
m.style.pixelTop=getT(o)+o.offsetHeight;
m.style.visibility='';
}
//隐藏
function hide(obj){
document.getElementById(obj).style.visibility='hidden';
}
//取得左边的位移
function getL(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
//取得顶部的位移
function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
</script>
</body>
</HTML>
分享到：
相关推荐
本教程将详细讲解如何利用jQuery实现一个图片特效，即当鼠标悬停在图片上时，图片下方会显示相关的文字与标题内容。 首先，要使用jQuery，你需要在HTML文件中引入jQuery库。这通常通过在`<head>`标签内添加以下代码...
本教程将深入探讨“jquery图片向上滑块显示文字效果”这一特效，这是一种交互式的设计，当用户将鼠标悬停在图片上时，图片会向上滑动，露出隐藏在下方的文字内容，为网站增添动态美感和用户体验。 首先，要实现这个...
在这个“jQuery鼠标经过图片滑动显示信息文字说明特效代码”中，我们将探讨如何利用jQuery实现一种互动效果，即当用户将鼠标悬停在图片上时，相关信息文字会以滑动的方式展示出来。 首先，我们需要在HTML中设置基本...
《jQuery实现鼠标hover悬停遮罩显示特效》 在网页设计中，动态效果常常能提升用户体验，其中一种常见的效果就是鼠标悬停时显示遮罩层。这个特效在各种交互元素中广泛应用，比如图片预览、按钮悬停提示等。本教程将...
在这个项目“jQuery鼠标悬停图片控制文字切换”中，我们将探讨如何利用jQuery来实现一个功能，即当用户将鼠标悬停在图片上时，与之相关的文字描述会进行切换。 首先，我们需要一个HTML结构来承载图片和相应的文字...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真...
18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...
18.jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19.jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20.jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21.jquery定时自动切换banner...
上述代码中，`scrollItems()`函数负责处理每个图片和文字项的切换，通过淡入淡出的效果实现平滑过渡。`setInterval()`函数则定时调用`scrollItems()`，实现持续滚动。 为了使效果更加丰富，可以考虑添加其他动画...
在前端开发中，jQuery库因其简洁的API和强大的功能，被广泛用于实现各种交互效果，如本案例中的“鼠标悬停文字渐隐渐现动画效果”。这个效果涉及到CSS、JavaScript和HTML5的基本知识，同时也充分利用了jQuery提供的...
18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...
在“固定文字说明的导航”中，每个链接旁边或者下方会有一个隐藏的区域，当鼠标移动到对应的链接上时，这个隐藏的区域会显示出来，提供关于该链接的详细说明。 要实现这样的功能，我们可以使用HTML来创建基本的结构...
这样，当用户鼠标悬停在链接上时，图片就会在适当的位置显示出来，提供一种视觉上的`title`效果。这种方法不仅可以应用于`<a>`标签，还可以应用于任何其他HTML元素，只需调整相应的CSS和JavaScript代码即可。 这个...
我们可以使用`<div>`元素作为容器，将图片和文字分别放在两个子`<div>`中，并为它们设置合适的CSS样式，以实现开关灯的效果。例如： ```html <div id="lightswitch"> <div class="image" style="background-image:...
- 预览网页，鼠标放在热点上时应显示链接状态。 3. 创建E-mail链接： - 选定邮件链接文字，使用“插入”菜单的“电子邮件链接”功能，输入邮件地址。 - 预览时点击文字，邮件客户端会自动弹出。 4. 创建下载...
- **层动画**：层动画需要将内容放在HTML的`<div>`层内，并通过CSS或JavaScript控制动画效果。 - **特殊符号**：` `表示空格，常用于HTML中创建不可见的空白。 - **链接路径**：在Dreamweaver中，创建链接时...
本文提供了一种很好的实现方法，即“文字滚动，鼠标悬浮可暂停”的功能，通过两种不同的JavaScript和jQuery实现方案，使得用户在鼠标悬停时能够暂停滚动，离开时恢复滚动。 首先，我们看HTML结构。在这个例子中，...
- 精灵图：将多个小图标合并到一张图片上，通过CSS控制显示。 - 字体图标：使用字体来显示图标，有矢量性好，可灵活调整大小等优点。 14. CSS三角和用户界面样式 CSS三角用于创建三角形图形，用户界面样式用于改善...
- header部分包含返回链接、导航、登录注册等11个链接，使用无序列表进行文本布局，通过JS实现鼠标悬停效果。 报告详细阐述了网站设计的关键要素，如用户体验、企业形象、信息展示策略，以及具体页面的HTML和CSS...
为了实现更复杂的滚动效果，比如图片轮播，我们可以将图片放在li元素中，再结合CSS实现图片的响应式布局。同时，Scroll.js还可以与其他jQuery插件结合，如轮播指示器或导航箭头，进一步提升用户体验。 在实际项目中...