1.html的代码如下：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 164/112){
if(image.width>164){
ImgD.width=164;
ImgD.height=(image.height*164)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
else{
if(image.height>112){
ImgD.height=112;
ImgD.width=(image.width*112)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
}
}
//-->
</script>
</HEAD>
<BODY>
<a href="1.jpg" target="_blank"><img src="1.jpg" border="0" width="164" height="112" onload="javascript:DrawImage(this);"></a>
</BODY>
</HTML>
图片以固定的大小显示，点击后显示原图片。
注意：1.html要和1.jpg放在同一个文件夹下，那样才能正确显示图片。
分享到：
相关推荐
五、图片显示 在前端显示图片时，需要从数据库中检索图片的二进制数据，然后将其以HTTP响应的方式发送给浏览器。在VS2005中，你可以创建一个HTTP Handler (.ashx) 文件来处理这个请求。在Handler中，读取数据库中的...
然后，通过canvas的`toDataURL()`方法，可以将画布上的内容转换为一个data URL，这个URL实际上就是一张图片的Base64编码，可以直接嵌入到HTML的`<img>`标签中显示。 二、基本步骤 1. 创建或获取Canvas元素：首先，...
总的来说，“jQuery下拉框图片选择特效imageselect.js示例”是一个实用且富有创意的前端解决方案，它展示了jQuery如何与自定义插件结合，为常见的HTML元素注入新的生命力。通过理解和运用这个插件，开发者可以进一步...
总之，JavaScript图片轮播是一个实用且常见的前端技术，它结合HTML、CSS和JavaScript三者之力，为网站增添动态效果。通过学习和实践此类示例，开发者可以提升自己的前端技能，更好地满足用户对于网页交互的需求。
以下是一个简单的示例，展示了如何使用JavaScript实现图片点击后全屏显示的功能： ```javascript // 获取图片元素 var imgElement = document.getElementById('myImage'); // 监听图片的点击事件 imgElement....
调用Web API接口FileReader中readAsDataURL方法读取数据（这个函数参数file标签获取到的文件路径），然后把数据加载到FileReader中（base64格式），之后就可以用Img来指定源时base64格式的数据，可以绘制图片。...
在本示例中，我们讨论的是如何使用JavaScript对基于Base64编码的图片进行解码并显示在网页上。Base64是一种用于将二进制数据编码为ASCII字符串的编码方式，它在传输或存储非文本数据时非常有用，例如图片。 在HTML...
标题中的“一个简单的JS图片浏览功能”指的是使用JavaScript实现的一种基本的图片查看器或图片轮播功能。在网页开发中，这种功能常用于创建在线相册、产品展示或其他需要动态展示图片的场景。JS（JavaScript）是一种...
- 缩略图通常是一组 `<img>` 元素，每个元素都有一个对应的大型图片URL。我们可以为每个缩略图添加一个类，例如 `thumbnail`，并设置`data-*`属性来存储大图的URL。例如： ```html ``` - 还需要一个用于...
总的来说，javascript实现的图片交替显示是一个基础但实用的功能，通过简单的代码就能让网页变得更加生动活泼。无论是初学者还是经验丰富的开发者，理解并掌握这一技术都能为网页增添更多动态魅力。
这个方法会返回一个包含图片Base64编码的data URI，格式通常是"data:image/jpeg;base64,..."或"data:image/png;base64,...". 3. **HTML中的data URI**：data URI是URL的一种特殊形式，可以直接在HTML中嵌入小型资源...
本篇将深入探讨如何利用JavaScript来创建一个图片轮换显示的效果。 首先，我们需要理解基本的HTML结构。在页面上展示图片，我们通常会使用`<img>`标签，例如： ```html ``` 这里的`id`属性用于后续JavaScript...
结合以上知识，我们可以看到这个压缩包可能包含一个或多个示例，演示了如何使用JavaScript进行Base64编码，显示本地图片，以及引导用户下载图片。这些技术在Web开发中非常实用，特别是对于那些需要处理用户上传图片...
2. **定时器**：设置一个定时器，按照设定的时间间隔自动切换图片。 3. **图片切换**：通过改变图片元素的`src`属性或者替换DOM中的图片节点来实现图片的更换。 4. **过渡效果**：为了提升用户体验，通常会添加淡入...
在这个示例中，`autoSwitch`函数负责更新图片的`src`属性，`currentIndex`变量记录当前显示的图片位置，`setInterval`则设置了一个每2秒执行一次的定时器，调用`autoSwitch`函数进行图片切换。 为了使切换效果更加...
2. **导航菜单**：动态导航菜单是JavaScript的一个经典应用场景，它可以实现下拉菜单、悬停效果、点击展开/关闭等。通过操作DOM（文档对象模型）元素，JavaScript可以轻松地改变HTML结构和CSS样式。 3. **滑动效果*...
在压缩包的文件名中，“02-dom-attribute-pic-change.html”很可能是一个示例页面，其中包含了实现图片切换的HTML结构和JavaScript代码。文件名中的“DOM-attribute”可能是指代码通过操作DOM元素的属性（如src）来...
本示例中的"动态调用数据库的图片切换示例"是一个典型的动态网页应用，它将图片展示的方式从静态转变为从数据库中获取数据。下面将详细阐述这个示例涉及的技术和知识点。 首先，"ASP"（Active Server Pages）是微软...
在JavaScript中，显示图片是一项基本的操作，广泛应用...4. 图片显示与隐藏的控制 5. 图片的预加载 6. 图片的动态交互 学习并理解这些知识点，将有助于你在实际项目中灵活地运用JavaScript来控制和管理网页中的图片。