`
cuisuqiang
  • 浏览: 3963098 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
3feb66c0-2fb6-35ff-968a-5f5ec10ada43
Java研发技术指南
浏览量：3672425
社区版块
存档分类
最新评论

缩略图显示和鼠标悬浮大图显示

    博客分类：
  • JS
JavaScriptHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var width = 300;  //设置层 宽
var height = 300; // 设置层 高

function init(){
document.all.im.width = width;
document.all.im.height = height;
}

function a( e ){
document.all.im.src = e.src;
document.all.d.style.left = event.x;
document.all.d.style.top = event.y;
document.all.d.style.display = "";
}

function b(){
 document.all.d.style.left = 0;
document.all.d.style.top = 0;
document.all.d.style.display = "none";
}
//-->
</SCRIPT>
<BODY onload="init()">
<input type="image" width=100 height=100 src="01.jpg" onMousemove="a(this)" onmouseout="b()">
<input type="image"  width=100 height=100 src="02.jpg" onMousemove="a(this)" onmouseout="b()">
<input type="image"  width=100 height=100 src="03.jpg" onMousemove="a(this)" onmouseout="b()">
<div id="d" style="position:absolute;left=0;top=0;display:none;border: 1px #FF00FF solid;" >
<input id="im" type="image">
</div>
</BODY>
</HTML>

 

分享到：
| Xpath java.lang.NoClassDefFoundError: or ...
评论
1 楼 cuisuqiang 2012-06-29   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 鼠标悬停提示 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showDetail( e,str ){
	document.all.showDetailDiv.innerHTML="提示内容：<br>" + str;
	// 为的是让提示的DIV显示在鼠标的右下角
	document.all.showDetailDiv.style.left = event.x + 10;
	document.all.showDetailDiv.style.top = event.y + 20;
	// DIV样式显示
	document.all.showDetailDiv.style.display = "";
}
function closeDetail(){
	document.all.showDetailDiv.style.left = 0;
	document.all.showDetailDiv.style.top = 0;
	// DIV隐藏
	document.all.showDetailDiv.style.display = "none";
}
//-->
</SCRIPT>
<BODY>
<input type="image" width=100 height=120 src="http://dl.iteye.com/upload/picture/pic/110263/8d4d9bf1-5626-33ea-8344-ae5c7789442e.jpg" onmousemove="showDetail(this,'端午粽飘香，离人望故乡')" onmouseout="closeDetail()">
<input type="image"  width=100 height=120 src="http://dl.iteye.com/upload/picture/pic/110263/8d4d9bf1-5626-33ea-8344-ae5c7789442e.jpg" onmousemove="showDetail(this,'惜君只欲苦死留，富贵何如草头露')" onmouseout="closeDetail()">
<input type="image"  width=100 height=120 src="http://dl.iteye.com/upload/picture/pic/110263/8d4d9bf1-5626-33ea-8344-ae5c7789442e.jpg" onmousemove="showDetail(this,'雨后轻寒犹未放，春愁酒病成惆怅')" onmouseout="closeDetail()">

<div id="showDetailDiv" style="width: 200px;height: 2px;position:absolute;left=0;top=0;display:none;border:1px red solid;background-color: #FF55BB"></div>
</div>
</BODY>
</HTML>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    鼠标悬停缩略图时显示大图片JS代码.rar

    一个响应式图片放大效果，在鼠标悬停于图片时，激活效果，放大显示图片，当鼠标移至对应方格中的图片时，该图片会以一定的倍数放大显示占据一定数量的方格，与其它方格图片重新布局，整齐排列，视觉效果很美观，js...

    jquery实现的鼠标经过悬浮相册缩略图是在鼠标右侧显示大图特效源码.zip

    该资源是一个基于jQuery库实现的相册特效代码，主要功能是当用户鼠标悬停在缩略图上时，在鼠标右侧动态展示对应的大图。这个特效为网页中的图像展示提供了互动性和视觉吸引力，使得用户可以方便地预览相册中的图片。...

    鼠标悬浮显示放大图标

    通常，我们会有一个包含缩略图的`&lt;div&gt;`，当鼠标悬停时，放大图会在这个`&lt;div&gt;`上方或旁边显示。 ```html ``` 2. **CSS样式**：接下来，我们为`&lt;div class="thumbnail"&gt;`和`...

    鼠标悬停显示大图

    在网页设计和开发中，"鼠标悬停显示大图"是一种常见的交互效果，它提高了用户的浏览体验，尤其是在展示产品图片或图像丰富的网站上。当用户将鼠标指针悬停在缩略图上时，通常会在鼠标旁边弹出一个预览窗口，显示该...

    VS2010滚动条缩略图插件

    当鼠标悬浮在滚动条上时，缩略图会变得更加清晰，显示出更详尽的代码片段。此外，用户还可以通过点击缩略图上的任意位置直接跳转到对应代码行，极大地提升了代码导航的便捷性。 【MetalMargin】是压缩包中的具体...

    带缩略图效果的焦点图

    2. **CSS 样式**：CSS用来定义焦点图的外观，包括大图和缩略图的尺寸、位置、过渡效果等。缩略图的效果可能包括悬浮高亮、鼠标悬停特效等，以增强用户的交互体验。 3. **JavaScript 动态效果**：使用JavaScript可以...

    CSS3 jQuery 缩略图悬浮提示效果.rar

    当鼠标悬停在缩略图上时，可能会触发一个平滑的过渡，使提示框从无到有、从隐藏到显示，或者改变其大小和颜色，以吸引用户的注意力。 jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理...

    vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，...

    基于jQuery实现的带缩略图悬浮上下切换焦点图特效源码.zip

    主图片容器显示当前选中的大图，缩略图列表供用户选择不同的图片。 2. **CSS样式**：定义了图片和缩略图的布局，以及焦点图的过渡效果，如淡入淡出、滑动等。 3. **jQuery代码**：负责监听用户的交互（如鼠标悬浮...

    jquery带缩略图循环切换焦点图代码

    4. **数据存储与索引**：为了记录当前显示的图片以及缩略图的对应关系，可能需要使用jQuery的`.data()`方法来存储和检索数据。同时，要根据索引实现图片的自动循环播放。 5. **定时器**：通过`.setInterval()`函数...

    JS+CSS3鼠标悬停图片层叠缩放展示特效

    // 根据x和y的位置计算z-index，使得越靠近鼠标的位置，z-index越大 // 这里仅作为示例，实际应用中可能需要更复杂的逻辑 return Math.floor(Math.sqrt(x * x + y * y)); } ``` 综上所述，这个特效结合了HTML、...

    Delphi 仿ACDSee_缩略图

    - 图像预览：当鼠标悬浮在缩略图上时，可以弹出一个预览窗口显示完整大小的图像。 通过上述步骤，我们可以在Delphi中实现一个基本的ACDSee风格的图像浏览程序，包括缩略图展示、元数据读取以及简单的交互功能。...

    We7CMS图片广告鼠标悬浮替换格式控件详细介绍

    一般情况下，需要生成两种尺寸的缩略图——大图和小图，以适应不同的展示需求。 - **列数（仅相册控件有效）**：对于相册类型的控件，可以设置图片的排列方式，如单列、双列或多列显示。 - **允许分页**：启用分页...

    javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失（多图）

    在网页设计中，有时我们需要实现一个功能：当鼠标悬浮在图片上时，显示该图片的放大版，而当鼠标移开时，放大图消失。这种效果通常用于产品展示或者图片预览，使得用户可以更清晰地查看图片细节。在本案例中，我们将...

    3D缩略图悬浮效果

    这种效果通常用于图像预览，当鼠标悬停在缩略图上时，会呈现出立体感和动态变化，使得用户能够更直观地了解内容，而当鼠标移开时，这些额外的视觉元素又会平滑地消失。这种效果不仅提升了网站的视觉吸引力，还能提高...

    基于CSS3+jQuery 完成3D缩略图悬浮提示效果.zip

    1. **事件监听**：通过`.on()`方法监听用户与缩略图的交互，如鼠标悬停和离开事件。 2. **动画效果**：jQuery的`.animate()`方法可以轻松实现复杂的动画效果，如缩略图的旋转。 3. **选择器**：jQuery提供了一系列...

    jQuery类似放大镜缩略图切换.zip

    本项目"jQuery类似放大镜缩略图切换"正是利用jQuery来创建一个具有独特视觉效果的图片展示系统，它结合了缩略图导航、放大镜效果以及动态切换功能，能够为网站的图片展示部分增添活力和吸引力。 首先，我们来看这个...

Magicbox
Global site tag (gtag.js) - Google Analytics