`
lvjinhua
  • 浏览: 10121 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

网上的一段JS动态缩小图片的代码,缩略图好帮手,支持FF,IE,Chrome

阅读更多
<script language="JavaScript">
var flag=false;
function DrawImage(ImgD,imageWidth,imageHeight) {
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= imageWidth/imageHeight){
     if(image.width>imageWidth){
     ImgD.width=imageWidth;
     ImgD.height=(image.height*imageWidth)/image.width;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     }
    else{
     if(image.height>imageHeight){
     ImgD.height=imageHeight;
     ImgD.width=(image.width*imageHeight)/image.height;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     }
    }
  }
</script>

用法:<img src="xxx" onload="javascript:DrawImage(this,120,60) ;"/>
分享到:
评论

相关推荐

    jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)

    本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案,包含了一个可直接使用的demo,下面我们将详细探讨这个轮播代码的关键知识点。 首先,jQuery的`.animate()`方法是实现左右滚动的...

    java 图片生成缩略图

    "java 图片生成缩略图" Java 图片生成缩略图是Java程序开发中一个常见的需求,通过将图片以缩略图形式展示,可以提高用户体验和网站性能。在本文中,我们将介绍使用Java生成缩略图的方法。 缩略图生成方法 在 ...

    WPF利用缩略图实现图片放大缩小

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中利用缩略图实现图片的放大缩小功能。WPF是微软.NET Framework的一部分,提供了一种强大的方式来创建丰富的、交互式的桌面应用程序。 首先...

    附带缩略图的JS图片轮换 特效 网页特效 flash特效 脚本代码.rar

    标题中的“附带缩略图的JS图片轮换特效”是指一种网页设计技术,通过JavaScript实现图片的自动轮换,并且在轮换过程中提供缩略图预览。这种技术能够增强网页的动态效果,提高用户体验,尤其适用于产品展示或者图片...

    上传图片后显示缩略图 js

    上传图片、缩略图 无刷 兼容FF、ie6 7 8 同比例缩放

    附带缩略图的JS图片切换代码

    "附带缩略图的JS图片切换代码" 提供了一种交互式的解决方案,它允许用户通过点击缩略图来切换主展示区的大图。这种功能在产品展示、相册浏览或者任何需要动态显示图片的场景中都非常实用。下面我们将详细讨论实现这...

    js实现网上相册形成缩略图,点击图片可以在页面查看大图

    在网页设计中,创建一个网上相册功能是常见的需求,其中关键步骤包括生成缩略图以及实现点击缩略图查看大图的效果。本项目通过JavaScript技术来实现这一功能,为用户提供直观、便捷的图片浏览体验。 首先,我们需要...

    动态缩略图实现方案

    动态缩略图是一种在网页或应用中常见的技术,它允许用户根据需要查看不同尺寸的图片,通常是缩小版的原图,以节省加载时间并优化用户体验。在Java中实现动态缩略图涉及到图像处理和流媒体技术。下面我们将深入探讨这...

    附带缩略图的JS图片轮换

    "附带缩略图的JS图片轮换"是一个基于JavaScript实现的图片轮换解决方案,它不仅提供了主图片的轮换,还带有缩略图导航,让用户能够直观地看到所有可切换的图片,并手动选择查看。这种功能常用于网站的幻灯片展示、...

    js实现带缩略图的图片切换效果(有控制按钮)

    在JavaScript编程中,实现一个带有缩略图的图片切换效果并配备控制按钮是一项常见的需求,尤其是在网站设计和用户界面开发中。这样的功能可以为用户提供更好的交互体验,让他们更轻松地浏览一组图片。以下是对这个...

    jpeg图片提取缩略图代码,包含库文件linux直接编译运行

    在本文中,我们将深入探讨如何使用jpeglib库在Linux环境下提取JPEG图片的缩略图,并进行网络传输。jpeglib库是JPEG(Joint Photographic Experts Group)标准的一个开源实现,它提供了一系列API,允许开发者对JPEG...

    JS 按图片比例截取中间部分 缩略图不失真

    在JavaScript(JS)中,创建一个按比例截取图片中间部分并保持图片不失真的缩略图功能是一项常见的需求。这通常应用于图片预览、相册展示等场景,以提高用户体验和节省网页加载资源。以下是对这个主题的详细阐述: ...

    原生js图片插件缩略图片控制大图淡出淡进切换支持图片轮播切换

    综上所述,实现“原生js图片插件缩略图片控制大图淡入淡出切换支持图片轮播切换”需要掌握JavaScript核心语法、DOM操作、事件处理、CSS3动画和响应式设计等多个技能。通过这样的插件,可以为用户提供更丰富的视觉...

    带缩略图及描述的js+css图片轮播

    【标题】"带缩略图及描述的js+css图片轮播"是一个常见的网页动态效果,主要用于展示一组图片,提供良好的用户体验。它结合了JavaScript(js)和CSS(层叠样式表)技术,使得图片能够以吸引人的方式自动或手动进行...

    jQuery左右滚动支持图片放大缩略图图片轮播代码.rar_js轮播s4_轮播图代码

    【jQuery左右滚动支持图片放大缩略图图片轮播代码】是一种常见的网页动态效果,用于展示多张图片并实现自动播放、手动切换等交互功能。在网页设计中,这样的轮播图能够有效地节省空间,提高用户体验,使用户可以方便...

    js图片幻灯片带缩略图

    JavaScript图片幻灯片带缩略图是一种常见的网页动态效果,用于展示一组图片并提供用户友好的交互体验。这种效果在网站的首页、产品展示或新闻滚动等场景中广泛应用。接下来,我们将深入探讨JavaScript实现图片幻灯片...

    js带缩略图的焦点图

    综上所述,js带缩略图的焦点图是一个结合了JavaScript、DOM操作、事件处理、图片适配和动画效果的复杂但实用的网页组件。它为用户提供了一种优雅的方式去展示和浏览多张图片,提升了网页的互动性和视觉吸引力。

    JS动态让网页生成的产品图片全部生成缩略图

    ### JS动态让网页生成的产品图片全部生成缩略图 #### 背景介绍 在网络应用中,图片处理是一项常见的需求,特别是在电子商务网站上,产品图片的展示效果直接影响用户体验。为了提高加载速度并优化视觉效果,通常需要...

    JS带缩略图自动播放的图片相册代码

    在JavaScript(JS)编程中,创建一个带有缩略图并能自动播放的图片相册是一项常见的任务,尤其在网页设计和交互式应用中。这样的功能可以让用户以视觉友好的方式浏览一组图片,同时提供轻松导航的体验。接下来,我们...

    图片缩略图展示图片缩略图展示图片缩略图展示

    在这样的项目中,可能涉及到使用AS3的图形类、事件监听和动画库来实现图片的动态缩略图展示,以及用户交互功能,如点击缩略图查看全图等。 总之,图片缩略图展示是IT行业中一个实用且多面的技术,它融合了前端开发...

Global site tag (gtag.js) - Google Analytics