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放在同一个文件夹下,那样才能正确显示图片。
分享到:
相关推荐
33:___右下角随机显示的JS图片广告 34:___向上翻动的内容切换示例 35:___图片友情链接滚动,横向,带控制按钮 36:___图片围成环形滚动,有空间感 37:___图片型不规则菜单的CSs实现 38:___图片拖拉缩放效果(仿PHOTO...
1.JS版图片轮换广告 2.SWF版图片轮换广告 3.内含调用示例
Plupload是一个开源组件!功能的确很强大!它主要功能是多文件上传,并提供图片客户端尺寸压缩。主要的特色是可以使用 Flash Gears HTML 5 Silverlight BrowserPlus HTML 4 等多项技术实现 我根据自己的需求做了些...
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”... <head> ...background-co
网站中js图片切换特效吗,其中包含了3个示例文件,内涵使用说明。作为一种当前最流行的网站显示动态图片的方法,你是否已经掌握了呢
开源代码之:jquery Reflex.js 图片倒影插件附示例,自动为你显示在网页上的图片添加倒影效果,核心代码基于Reflex.js ,内含效果演示和用法文档,效果如演示截图所示。
这个示例中,我们创建了一个简单的图片浏览网站,其中包括一个顶部的标题栏(header)、一个图像库(gallery)和一个底部的页脚(footer)。图像库使用CSS的网格布局(grid)来自动调整图像的大小和布局。 您需要将...
但是图片默认的裁剪区域往往被显示在一个固定的位置,而这个位置却往往又不是精准的用户裁剪位置。因此今天为大家介绍的这一款开源库,就是为了解决这类问题,并为用户提供更好的用户体验的。 smartcrop.js 支持: ...
86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件...
vue实现桌面向网页拖动文件的示例代码(可显示图片音频视频) 效果 若使用 请自行优化代码和样式 不显示图片/播放视频音频代码如下 <template> <div> ;height: 200px;border: 1px solid black;font-size: 40px;...
MathJax官网总是下载失败,亲测可用,放一个2.3版本的源码在这里。MathJax是一款运行在浏览器中的开源的数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析...
不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果。 先说需要知道的服务器返回的status code:status-code: 200 – 客户端请求成功status-code: 304 – 文件已经在浏览器缓存中,服务器告诉...
这个示例展示了如何使用HTML、CSS和JavaScript创建一个基本的轮播图。 首先,在HTML部分,我们创建了一个具有.slideshow类的div元素作为轮播图的容器。我们在容器中放置了多个img元素作为轮播图的图片。每个img元素...
主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下
jQuery-Fakecrop是一款基于jquery的图片等比例缩放插件,用户使用插件后可方便的在网页固定宽度和高度的区域显示图片,JS方式调用,如示例所示,可设置限制宽度和不限制宽度,图片显示时候自动裁切,以满足对布局的...
##目录简单节点服务器这是我做过的第一个基于 Node.js 的后端 javascript 程序。 它非常简单,可以接收来自浏览器的 post 请求并将内容发送回最终用户。上传图片这是一个基于 Node.js 和强大模块的图片上传器。 ...
86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件...
86. 分享一款jquery仿lightbox无刷新图片显示插件PrettyPhoto下载 87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件...
前言 对于新手的我,以前从来没有做过对像素进行操作的实例。于是把资料书找了出来,实现了这个功能,比较简单,大神勿喷。下面是效果图,因为重在思路,...(显示可以用putImageData,3个参数,第一个是需要显示的图像
主要为大家详细介绍了js实现上传图片并显示图片名称,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下