（源码实例）通过层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>
分享到：
相关推荐
总的来说，"div鼠标任意拖动jqery源码实例" 是一个教你如何使用 jQuery 实现可拖动 `div` 元素的教学示例。它涵盖了 HTML、CSS 和 JavaScript（尤其是 jQuery）的基础知识，帮助开发者理解和应用交互式界面设计。...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真...
《DIV+CSS+JQUERY源码实例》涵盖了网页设计与开发的关键技术，通过学习这些知识点，开发者可以创建出既美观又功能丰富的网页。无论你是初学者还是经验丰富的开发者，理解并掌握<div>、CSS和jQuery的运用都将对你的...
33.jQuery实现鼠标移到链接提示显示图片功能插件 34.jquery实现鼠标经过链接放大图片特效代码 35.jquery实用Banner大图片横向切换效果 36.jquery实用产品图片展示动感切换效果源码 37.jquery平滑交换真彩色...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...
这个"css3实现鼠标悬停位置图片神秘遮罩层点击放大显示效果源码"正是这样一个实例，它将帮助我们深入理解如何运用CSS3来增强用户体验。 首先，我们需要一个HTML结构来承载图片。通常，我们会使用`<img>`标签，然后...
"jQuery实现鼠标滑过图片显示隐藏标题效果源码.zip"是一个示例项目，它演示了如何利用jQuery来增强图片的交互性，通过鼠标悬停事件触发隐藏标题的显示和隐藏。 首先，jQuery的选择器功能使得能够轻松地选取DOM元素...
这个“jQuery实现鼠标滑过图片出现遮罩层特效源码.zip”是一个实例，展示了如何利用jQuery来创建一种常见的网页交互效果：当用户将鼠标悬停在图片上时，会有一个半透明的遮罩层覆盖在图片上方，通常用于显示额外信息...
实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二级导航菜单 74 实例048 半透明背景的下拉菜单 76 实例049 展开式导航条 80 实例050 用层制作下拉菜单1 81 实例051 用层制作下拉菜单2 84 1.10...
33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色...
这个源码实现了3D多层图片效果，当用户移动鼠标时，图片的各层会以不同的速度移动，从而产生一种深度感和立体感，这种效果被称为“视觉差”或“视差滚动”。 **jQuery**: jQuery是一个流行的JavaScript库，简化了...
《jQuery弹出可拖动Div模态层源码解析与应用》 在Web开发中，交互性和用户体验成为了衡量一个网站质量的重要标准。jQuery作为一个轻量级的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。今天我们将...
本资源"jquery实现鼠标hover悬停遮罩显示特效源码.zip"显然提供了一种利用jQuery来创建鼠标悬停时显示遮罩效果的代码示例。下面我们将详细探讨这个主题。 首先，jQuery中的`hover()`函数是这个特效的核心。它接受两...
13.11 实例九：鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 14.2 XML链接CSS文件 14.3 XML文字阴影效果 14.4 XML古诗字画 14.5 XML实现隔行变色的表格 第15...
此外，通过监听`dragenter`, `dragover`, 和 `dragleave`事件，我们可以动态改变dropzone的样式，比如在鼠标进入、悬停和离开时显示不同的视觉提示。 在这个实例源码中，开发者可能已经实现了以下步骤： 1. 创建一...
总的来说，这个源码实例展示了如何利用CSS3的高级功能创建交互式的网页效果，通过九宫格布局、遮罩层、过渡效果和悬浮事件处理，实现了鼠标悬停时的动态变化，这不仅增强了用户体验，也是前端开发中的重要技能。...
jQuery实现鼠标移到链接提示显示图片功能插件 jquery实现鼠标经过链接放大图片特效代码 jquery实用Banner大图片横向切换效果 jquery实用产品图片展示动感切换效果源码 jquery平滑交换真彩色的图片逐渐变为黑白图像的...
13.11 实例九：鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 14.2 XML链接CSS文件 14.3 XML文字阴影效果 14.4 XML古诗字画 14.5 XML实现隔行变色的表格 第15章 CSS...
开发者可以通过打开这个文件在浏览器中查看和测试实现的鼠标悬停显示图片信息的功能。 总结，实现“鼠标经过图片，弹出图片信息”的功能，主要涉及到HTML、CSS和JavaScript的综合运用。通过创建合适的HTML结构，...