图片查看器
实现原理：动态的绑定每个缩略图的onmouseover事件，在方法中显示图片展示层。给document绑定onclick，通过判断事件的坐标，来决定是否隐藏图片展示层，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 图片查看器 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- 设置缩略图的样式 -->
<style type="text/css">
td>img
{
width:150px;
height:150px;
border:1px solid blue;
}
div>img
{
width:700px;
height:600px;
}
</style>
<!-- 缩略图的JS事件 -->
<script type="text/javascript">
<!--
function userLoad()
{
var imgs = document.getElementsByTagName('img'); //缩略图
var imgdis = document.getElementsByTagName('imgdis'); //大图
var oBody = document.body;//body
//给缩略图绑定单击、光标进入以及离开的事件
for (var i = 0; i < imgs.length ; i++ )
{
var simg = imgs[i];
//单击缩略图
simg.onclick = function(event)
{
event = event || window.event;
//document.getElementById("imgdis").innerHTML = "<img src='"+this.src+"'>";
//document.getElementById("imgdis").style.display = "block";
try
{
event.cancelBubble = true;
}
catch (e)
{
event.stopPropagation();
}
}
//光标离开缩略图上
simg.onmouseout = function()
{
this.style.border = '1px solid blue';
}
//光标移到缩略图上
simg.onmouseover = function()
{
this.style.border = '2px solid red';
document.getElementById("imgdis").innerHTML = "<img src='"+this.src+"'>";
document.getElementById("imgdis").style.display = "block";
}
}
//给大图绑定点击事件
imgdis.onclick = function(event)
{
event = event || window.event;
try
{
event.cancelBubble = true;
}
catch (e)
{
event.stopPropagation();
}
}
//body的单击事件
document.onclick = function(event)
{
event = event || window.event;
var imgdis = document.getElementById("imgdis");
var pleft = parseInt(imgdis.style.left.replace('px',''));
var ptop = parseInt(imgdis.style.top.replace('px',''));
var pwidth = parseInt(imgdis.style.width.replace('px',''));
var pheight = parseInt(imgdis.style.height.replace('px',''));
if (event.screenX < pleft || event.screenX > (pleft+pwidth) || event.screenY < ptop || event.screenY > (ptop+pheight))
{
imgdis.style.display = "none";
}
}
}
//-->
</script>
</head>
<body onload="userLoad()">
<table>
<tr>
<td><img src="1.jpg" alt="1"></td>
<td><img src="2.jpg" alt="2"></td>
<td><img src="3.jpg" alt="3"></td>
<td><img src="4.jpg" alt="4"></td>
<td><img src="5.jpg" alt="5"></td>
<td><img src="6.jpg" alt="6"></td>
<td><img src="7.jpg" alt="7"></td>
<td><img src="8.jpg" alt="8"></td>
</tr>
</table>
<div id="imgdis" style="border:2px solid black;width:700px;height:600px;position:absolute;top:80px;left:300px;display:none;z-index:2;"></div>
</body>
</html>
相关推荐
JavaScript图片查看器是一种基于Web的图像浏览解决方案，它允许用户在网页上查看、缩放、旋转和翻转图片。这个压缩包"javascript 图片查看器(可缩放、旋转、翻转).zip"包含了实现这一功能的核心代码和可能的使用说明...
网页模板中的JavaScript图片查看器是一种常见的交互式组件，它允许用户在网页上预览、缩放、旋转和翻转图片，提升用户体验。这种技术在现代网页设计中被广泛应用，特别是在电子商务网站、画廊展示和多媒体内容分享...
JavaScript图片查看器是一种基于Web的图像浏览解决方案，它允许用户在网页上查看、操作图片，提供了平移、放大、缩小以及旋转等丰富的交互功能。这种查看器尤其适用于那些需要展示大量或高分辨率图片的网站，比如...
**JavaScript图片查看器详解** JavaScript图片查看器是一种利用JavaScript编程语言实现的网页图像浏览工具，它赋予用户在网页上对图片进行多种操作的能力，如旋转、缩放和翻转等。这种技术通常用于提高用户体验，...
【JS图片查看器技术解析】 JS图片查看器是一种利用JavaScript编程语言实现的网页图像浏览工具，它可以提供丰富的交互功能，...通过理解这些知识点，开发者可以构建出自己的JavaScript图片查看器，满足不同的项目需求。
首先，让我们深入了解JavaScript图片查看器的核心功能： 1. **图片缩放**：通过监听鼠标滚轮事件，可以实现图片的放大和缩小。JavaScript能够动态地改变图片的CSS属性，如`width`和`height`，或者使用CSS3的`...
JavaScript图片查看器是一种常见的网页交互元素，用于展示和浏览图片，尤其在网页摄影集或产品展示等场景中广泛应用。在JavaScript中实现图片查看器，主要涉及到DOM操作、事件监听、图像处理以及CSS3动画等技术。 ...
通过上述步骤，我们已经创建了一个基本的JavaScript图片查看器，它能够实现与Google地图类似的功能，包括放大、缩小、移动和还原图片。这个查看器可以在div内运行，同时兼容IE和Firefox等浏览器。你可以根据需求...
总的来说，创建一个强大的JavaScript图片查看器涉及的知识点包括：JavaScript基础语法，DOM操作，事件监听，CSS变换，图片格式处理，以及可能的浏览器兼容性策略。通过理解和实践这些技术，开发者可以构建出用户友好...
**基于jQuery和Bootstrap的图片查看器** 在网页开发中，图片查看器是一个常见的功能，它允许用户以更直观的方式查看和交互图片。本项目利用了流行的前端框架jQuery和Bootstrap，构建了一个具有鼠标点击放大、相册...
"js图片查看器"是一种基于JavaScript技术实现的用于在网页中查看和浏览图片的应用程序。JavaScript，简称JS，是Web开发中的主要脚本语言，它允许开发者在用户浏览器上动态处理内容，包括图像的显示、缩放、旋转等...
6. **响应式设计**：考虑到不同设备和屏幕尺寸，图片查看器应具有响应式布局，确保在手机、平板和桌面电脑上都能正常工作。 7. **错误处理**：当图片加载失败时，应提供备用策略，如显示错误提示或默认图片。 8. *...
在本项目中，我们探讨的是如何使用JavaScript实现一个图片查看器，该查看器模仿了知名的Lightbox效果。Lightbox是一种流行的设计模式，当用户点击图片时，会在当前页面上以全屏、半透明背景的形式展示大图，提供更佳...
现在，我们更多地会使用HTML5的`<img>`标签、Canvas或者JavaScript库（如Fancybox、Lightbox等）来创建图片查看器，它们不仅兼容性更好，而且可以利用现代浏览器的特性，如CSS3动画和WebGL，实现更流畅、更高效的...
通过以上分析，我们可以看出“EXTJS 强大的图片查看器 仿windows照片查看器”是一个结合了EXTJS框架、JavaScript编程、响应式设计和用户交互的综合性项目，开发者需要具备多方面的技能才能成功地定制和应用这个组件...
3. **配置参数**：根据项目需求，你可能需要调整图片查看器的一些设置，例如切换速度、过渡效果、自动播放等，这可以通过修改JavaScript代码中的变量或函数来实现。 4. **兼容性检查**：虽然MooTools库提供了良好的...
本示例将详细讲解如何利用 jQuery 实现一个基本的图片查看器功能，包括图片的放大、缩小、拖动和旋转，以提供用户友好的交互体验，并确保兼容多种浏览器。 首先，我们需要在页面中引入 jQuery 库。可以通过 CDN...
"查看流_finger4en_图片_"这个标题可能指的是一个名为"Finger4en"的JavaScript图片查看器插件，它专用于增强网页上的图片浏览功能。这款插件可能是为了提供手势识别、平滑缩放、旋转等高级交互特性，以提升用户体验...
Flash图片查看器不仅能够展示图片，还能与网页其他部分互动，例如响应用户的点击事件，或者与其他JavaScript库协同工作。通过将Flash图片查看器嵌入HTML，开发者可以为网站增添活力，提高用户的浏览兴趣。 5. **...