`

网页图片按比例显示缩略图的Javascript解决方法

    博客分类：
  • Flex
JavaScript 
阅读更多
网页图片按比例显示缩略图的Javascript解决方法

<script language="javascript">

function init()
{
RsizeAllImageById("imgProductItem", 150, 150);
}

//将页面内所有指定id的图片按比例缩放
function RsizeAllImageById(id, W, H)
{
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++)
{
   if(imgs[i].id == id)
   {
    ResizeImage(imgs[i], W, H);
   }
}
}

function ResizeImage(imageDest, W, H)
{
//显示框宽度W,高度H
var image = new Image();
image.src = imageDest.src;
if(image.width>0 && image.height>0)
{
    //比较纵横比
    if(image.width/image.height >= W/H)//相对显示框：宽>高
    {
     if(image.width > W) //宽度大于显示框宽度W，应压缩高度
     {
               imageDest.width = W;
               imageDest.height = (image.height*W)/image.width;  
              }
     else //宽度少于或等于显示框宽度W，图片完全显示
     {
               imageDest.width = image.width;      
               imageDest.height = image.height;  
              }
    }
    else//同理
    {
     if(image.height > H)
     {
               imageDest.height = H;
               imageDest.width = (image.width*H)/image.height;
              }
     else
     {
               imageDest.width = image.width;
               imageDest.height = image.height;
              }
    }
}
}
</script>

调用<BODY onload="javascript:init();">

 

<img style="cursor:pointer" height="150" width="150" id="imgProductItem" name="imgProductItem">

 

 

 

 

个人签名

-------------------------------------

 

图盾 淘宝保护 保护图片 图片防盗

<script type="text/javascript"></script>

分享到：
| 计算网页停留时间
评论
发表评论

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

相关推荐

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

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

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

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

    图片裁剪自动生成缩略图

    "图片裁剪自动生成缩略图"这个话题涉及到的是如何使用JavaScript库，特别是JQuery框架，来实现图片的裁剪功能，并自动创建适合展示的缩略图。接下来，我们将详细探讨这一过程中的关键技术点。 首先，JQuery是一个...

    js控制图片缩放 不失真 获取图片真实长和宽

    在JavaScript中，实现图片的等比例缩放以保持不失真是一项常见的需求，特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能，并解决图片在切换时保持正确比例的问题。 首先，我们要明白图片不失真的...

    JS编写的基于网页的图片浏览器

    在网页上显示图片时，保持图片的比例至关重要，以避免图像失真。这个JS类库实现了自动按比例缩放图片的功能，确保无论图片的原始尺寸如何，都能适应预设的显示区域。这通常是通过计算图片的宽高比，并根据容器的尺寸...

    jQuery图片等比例缩放截取显示代码.zip

    总结起来，"jQuery图片等比例缩放截取显示代码" 是一种高效且灵活的图片显示解决方案，它结合了jQuery的便利性和jQThumb插件的专业性，使得在网页中展示图片变得更加智能和美观。通过合理运用这些技术，开发者可以...

    生成缩略图Activex源码

    当用户上传图片时，为了提高用户体验，通常会在后台自动生成缩略图，以便在产品列表或其它展示区域快速加载和显示。这个"生成缩略图Activex源码"正是解决此类问题的一种解决方案。 ActiveX是一种由微软开发的技术，...

    [其他类别]上传图片生成缩略图、图片水印、文字水印_7he7upload.zip

    这个压缩包文件"【其他类别】上传图片生成缩略图、图片水印、文字水印_7he7upload.zip"显然是一个关于图片处理的源码参考，它包含了解决三个关键问题的代码：生成缩略图、添加图片水印以及添加文字水印。接下来，...

    jquery图片插件设置图片等比例缩放.rar

    C#虽然在本场景中不是直接使用的技术，但作为.NET框架的一部分，C#开发者可能需要在服务器端处理图片的上传、预处理（如生成缩略图），或者与前端jQuery插件进行交互，例如通过Ajax传递数据。 在实际应用中，我们还...

    jquery 缩略图

    对于“jQuery缩略图”这个主题，我们将深入探讨如何利用jQuery实现图片的缩略显示，以及相关的技术细节。 一、jQuery基础 在了解jQuery缩略图之前，我们需要先理解jQuery的基本概念。jQuery是由John Resig创建的一...

    图片缩略的实现外国人写的代码

    "图片缩略的实现外国人写的代码"这个资源提供了一种简单有效的解决方案来创建图片的缩略图。下面，我们将深入探讨图片缩略图的生成原理、常用的编程语言实现以及一些关键的算法和技术。 首先，缩略图的生成通常是...

    基于PHP的图片预览上传并成生成缩略图组件 php版 v1.0.zip

    生成缩略图通常涉及设置目标宽度和高度，保持原图比例，然后对图片进行裁剪或拉伸。 4. 文件管理：上传后的图片可能需要存储在服务器的特定目录下，PHP可以用来创建、删除、重命名文件和目录，管理文件路径，确保...

    javascript特效_鼠标放大图片

    这个特效主要用于增强用户的交互体验，当用户将鼠标悬停在缩略图上时，图片会放大显示，使得用户能够更清晰地查看细节。在本文中，我们将深入探讨如何使用JavaScript来实现这种特效，并涉及与之相关的技术点。 首先...

    Lightbox插件（图片大小调节）

    Lightbox插件是一种广泛应用于网页设计中的图片展示工具，它允许用户在点击缩略图后，在当前页面上弹出一个半透明的黑色背景层，中间显示全尺寸的图片。这种设计既保持了网页的整洁性，又提供了良好的用户体验，使得...

    262e7217cb876_网站缩略图生成工具站源码_

    网站缩略图生成工具是一种非常实用的在线服务，它能够帮助用户快速地将一个完整的网页转化为较小尺寸的图片，通常用于网站预览、目录展示或者社交媒体分享等场景。标题中的"262e7217cb876_网站缩略图生成工具站源码_...

    jquery插件图片查看

    colorbox插件支持根据浏览器窗口大小动态调整图片尺寸，以保持图片比例并适应不同设备。这通常涉及到`$(window).resize(function() {})`事件监听，当窗口大小变化时，重新计算图片的宽度和高度。此外，colorbox还...

    基于jQuery的图片点击弹窗预览大图插件，jquery.fancybox-1.3.4

    3. **响应式设计**：Fancybox能够根据设备屏幕大小自动调整图片的显示比例，适应各种屏幕分辨率。 4. **交互控制**：用户可以通过键盘或鼠标操作（如左右键、滑动）来浏览图片集，提供了良好的导航体验。 5. **...

    javascript实现获取图片大小及图片等比缩放的方法

    本文介绍了使用JavaScript来获取图片的尺寸以及实现图片按比例缩放的方法。在Web开发中，对图像的处理是一个常见需求，而JavaScript提供了处理图形图像相关属性获取和修改的接口。 首先，关于获取图片的尺寸，文章...

    头像上传插件带裁切，旋转，缩略图功能

    **缩略图** 是为了优化页面加载速度和视觉效果，通常将大尺寸的图片转换为小尺寸的版本显示。这可以在前端进行，也可以在后端处理，常见的JavaScript库如sharp或imagemagick可以实现这一功能。前端生成缩略图可以...

    jquery高仿新浪微博图片显示插件

    它可以根据浏览器窗口大小自动调整图片的显示方式，如切换为缩略图模式或全屏预览，确保在任何设备上都能获得良好的视觉体验。 3. **图片预览与放大**：用户可以通过点击或悬浮在图片上触发预览效果，这通常通过CSS...

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