并非原创,主要是产品部的需求。对网站商户图片进行等比例缩放。
script:
function resizeimg(ImgD,iwidth,iheight) {
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
ImgD.style.cursor= "pointer"; //改变鼠标指针
ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器,如果是IE
ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
ImgD.onmousewheel = function img_zoom() //滚轮缩放
{
var zoom = parseInt(this.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom> 0) this.style.zoom = zoom + "%";
return false;
}
} else { //如果不是IE
ImgD.title = "点击图片可在新窗口打开";
}
}
}
HTML:
<img id="imgDoc" border="0" src="test.jpg" onload="javascript:resizeimg(this,400,300);" >
引用:http://www.rev9.cn/article.asp?id=82
分享到:
相关推荐
### JavaScript 实现网页图片等比例缩放 在网页设计与开发过程中,经常遇到的一个问题是确保图片能在不同设备、不同分辨率的屏幕上保持良好的显示效果。图片的等比例缩放是其中一种解决方案,它能够保证图片在缩放...
本文将深入探讨如何使用JavaScript实现图片的等比例缩放,并将其居中显示。 首先,我们需要理解等比例缩放的基本原理。等比例缩放意味着图像的宽度和高度按相同的比例进行缩放,以保持其原有的形状。公式是:新尺寸...
本篇将详细讲解如何使用JavaScript实现图片等比例缩放,以及相关的编程知识。 一、图片等比例缩放原理 等比例缩放的核心思想是保持图像的宽高比不变,避免因缩放导致图像变形。在计算新的宽度或高度时,通常会基于...
本篇将详细介绍如何使用JavaScript实现图片的等比例缩放,并通过一个完整的示例来解析其工作原理。 首先,我们需要理解等比例缩放的基本概念。等比例缩放是指在调整图片大小时,保持其宽高比不变,避免图像变形。在...
本文将深入探讨如何利用jQuery实现图片的等比例缩放。 ### 等比例缩放的原理 等比例缩放的核心在于保持图片的宽高比,即宽度与高度的比例不变。在CSS中,我们通常设置`max-width: 100%`和`max-height: 100%`来限制...
本文将深入探讨如何实现图片等比例缩放,并结合实例分享一个针对IE6、IE7以及Firefox浏览器的个人最优化版本。 等比例缩放的基本原理是保持图片的纵横比不变,即在调整图片宽度或高度时,另一个维度也会相应按比例...
本文将详细介绍如何利用JavaScript(简称JS)以及jQuery这两种常用前端技术实现图片的等比例缩放。 #### 一、基础知识简介 **1.1 图片等比例缩放的概念** 等比例缩放是指在调整图片大小时保持其原始宽高比不变的...
在本篇文章中,我们将深入探讨如何进行图片按比例缩放,以及这一过程中的相关知识点。 首先,我们来理解什么是“按比例缩放”。比例缩放是指保持图片的长宽比,即纵横比不变,只改变其尺寸大小。如果不按比例缩放,...
图片等比例缩放和动态加载是两种常见的优化技术,它们可以提高页面加载速度,节省用户流量,同时保持图片的视觉一致性。以下将详细介绍这两种技术及其实现方法。 一、图片等比例缩放 等比例缩放是指在不改变图片宽...
javascript实现图片按比例缩放
本篇文章将从一个具体的JavaScript代码示例出发,详细解析图片等比例缩放的技术实现细节。 #### 二、核心代码分析 首先,我们来看一下这段提供的JavaScript代码片段,它实现了图片等比例缩放的功能。 ```...
"jQuery图片插件设置图片等比例缩放"是一个实用的功能,能够确保图片在不同尺寸的屏幕上保持其原始比例,从而避免图片变形,提供良好的视觉效果。jQuery作为一款强大的JavaScript库,提供了丰富的功能来处理DOM操作...
在网页设计中,动态的图片展示效果可以提升用户体验,其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能,来实现图片随着页面滚动而优雅地...
例如,可以使用CSS的`background-size`属性配合`cover`或`contain`值来实现背景图片的等比例缩放。 总的来说,通过jQuery实现等比例缩放图片是一项实用的技术,可以确保在不同屏幕尺寸下保持良好的视觉效果。结合...
jquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置图片等比例缩放.rarjquery图片插件设置...
按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码...
2. **性能优化**:对于大量图像的等比例缩放处理,需要考虑性能优化措施,比如使用Web Workers来异步处理图像数据。 3. **用户体验**:在设计过程中,还需考虑到用户对于不同场景下的图像显示需求,提供灵活的自定义...
在前端开发领域,图片的等比例缩放与居中显示是一项常见的需求,尤其在构建响应式网站或处理不同尺寸图片的展示时。"jQuery图片等比例缩放图片左右垂直居中"这一技术就是为了应对这样的挑战。jQuery是一个广泛使用的...
在探讨“js图片等比例缩放”的主题时,我们深入解析了如何利用JavaScript来实现图片的等比例缩放,这是一个在网络开发中极为实用且常见的需求。等比例缩放的目的是为了适应不同尺寸的屏幕或布局需求,同时保持图片...
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...