`

js 缩放图片

阅读更多

使用javascript 如何缩放图片呢?

先看一下效果

 点击"缩放",效果如下:

 页面代码:

                        	<span style="float:left"> <a href="javascript:com.whuang.hsj.scale22(true,'company_module_pic');">放大</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="javascript:com.whuang.hsj.scale22(false,'company_module_pic');">缩小</a>
</span>
                        <img src="/yhyc/upload/image/20141016/20141016212719_312.jpg" id="company_module_pic" alt="轮播图" width="500">
                        

 说明:company_module_pic 是img标签的id

com.whuang.hsj.scale22 的实现:

/***
* 缩放图片
*/
com.whuang.hsj.scale22=function(isBig,company_module_pic){
	if (typeof company_module_pic == 'string') {
		company_module_pic=com.whuang.hsj.$$id(company_module_pic);
		if(company_module_pic==null ||company_module_pic==undefined){
			company_module_pic=com.whuang.hsj.$$one(company_module_pic);
		}
	}
	if(company_module_pic==null ||company_module_pic==undefined){
		return;
	}
	var oldWidth=company_module_pic.width;
	if(oldWidth==0){
		return;
	}
	var speed33=50;
	if(com.whuang.hsj.isHasValue(company_module_pic.src)){
		if(isBig){
			oldWidth+=speed33;
		}else{
			oldWidth-=speed33;
		}
		if(oldWidth>1300||oldWidth<400){
			alert("不能再缩放了");
			return;
		}
		company_module_pic.width=oldWidth;
	}
	

};

 依赖的方法:

/*******************************************************************************
 * by id
 */
com.whuang.hsj.$$id = function(name22) {
	return document.getElementById(name22);
};
/***
 * if is radio ,please use com.whuang.hsj.$$arr
 * @param name22
 * @returns
 */
com.whuang.hsj.$$one = function(name22) {
	if (com.whuang.hsj.isHasValue(name22)) {
		var names222=document.getElementsByName(name22);
		//alert("names222:"+names222);
		//alert("typeof:"+(typeof names222 ));
		var className=Object.prototype.toString.call(names222);
		var boolean_isArray;
		var ieHtmlCollection='[object HTMLCollection]';
		if(isIEtest)//if browser is IE
		{
                 boolean_isArray=( className=== '[object Object]') ||(className=== ieHtmlCollection) ||names222 instanceof Array ;
		}else
		{
                 boolean_isArray=( className=== '[object Array]') ||(className=== '[object NodeList]'  )||(className==ieHtmlCollection)||names222 instanceof Array||names222 instanceof NodeList;
		}
		if(names222){
             if(boolean_isArray){
                     return names222[0];
             }else{
                     return names222;//why add [0] ??
			}
		}else{
			return "";
		}
	} else {
		return "";
	}
};
/**
 * whether has value
 * 
 * @param {Object}
 *            input
 */
com.whuang.hsj.isHasValue = function(input) {
	if (typeof input == "number" && input == "0") {
		return true;
	}
	if(!input)
	{
		return false;
	}
	if(input==""||input==undefined||com.whuang.hsj.isWholeWhitespace(input)){
		return false;
	}
	return true;
};
/**
 * is whitespace entirely
 * 
 * @param {Object}
 *            inputString
 */
com.whuang.hsj.isWholeWhitespace = function(inputString) {
	if (typeof inputString == "object") {
		return inputString;
	}
	var bootInit = true;
	if (inputString == "" || inputString == undefined) {
		return false;
	}
	for ( var i = 0; i < inputString.length; i++) {
		var c = inputString.charAt(i);
		if (!com.whuang.hsj.isWhitespace(c)) {
			bootInit = false;
			break;
		}
	}
	return bootInit;
};
com.whuang.hsj.isWhitespace = function(input) {// whether has whitespace
	var whitespace = " \t\n\r";
	for ( var i = 0; i < input.length; i++) {
		var c = input.charAt(i);
		if (whitespace.indexOf(c) >= 0) {
			return true;
		}
	}
	return false;
};

 

注意:

(1)com.whuang.hsj.scale22方法的第一个参数是boolean类型,必须是false或true;

第二个参数可以是img的id  ,也可以是img的name

 

  • 大小: 31.6 KB
  • 大小: 25.1 KB
0
0
分享到:
评论

相关推荐

    js等比缩放图片

    本文将深入探讨如何使用JavaScript实现图片的等比缩放,确保在火狐、IE、谷歌等主流浏览器中都能正常工作。 首先,我们要明白等比缩放的基本原理。等比缩放意味着图片的宽度和高度按相同的比例进行缩放,以保持其...

    js缩放图片尺寸函数

    缩放图片尺寸函数,接受参数最大宽,最大高,所在div的名称

    手机js手势放大缩放图片插件

    总结来说,"手机js手势放大缩放图片插件"通过JavaScript和CSS3技术实现了移动设备上的手势交互,提供了平移和缩放图片的功能。它的核心包括手势识别、坐标转换、性能优化以及可配置性,是移动Web应用中提升图片浏览...

    hammer.js移动端图片手指缩放插件

    总的来说,Hammer.js 通过其强大的手势识别能力,结合JavaScript事件监听和处理,为移动端图片手指缩放提供了简单易用的解决方案。开发者可以根据需求,灵活地扩展和定制功能,提升移动应用的交互性。

    js按比例缩放图片,不变形,不失真

    "js按比例缩放图片,不变形,不失真"是一个常见的需求,特别是在用户上传图片或者在页面中显示不同尺寸的图片时。传统的做法是直接设定图片的高度或宽度,但这往往会导致图片比例失衡,产生变形和失真的现象。本篇...

    js图片缩放效果制作鼠标滚动图片等比例缩放

    在网页设计中,动态的图片展示效果可以提升用户体验,其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能,来实现图片随着页面滚动而优雅地...

    js 高清查看图片 图片缩放 图片移动

    高清查看图片 图片缩放 图片移动 可实现在一定范围内图片移动缩放

    js房产网站大小缩放图片滚动展示

    "js房产网站大小缩放图片滚动展示"这一技术就是为了让网站中的图片根据屏幕尺寸自适应缩放,并实现平滑滚动效果,从而提供优秀的用户体验。下面将详细探讨这一技术涉及的知识点。 1. **响应式设计**:在当前多设备...

    按比例缩放图片,JavaScript代码.rar

    按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码.rar按比例缩放图片,JavaScript代码...

    图片缩放JS插件

    "图片缩放JS插件"就是一种专门解决这个问题的工具,它允许用户通过手势来放大和缩小图片,提供了更为直观和互动的查看方式。这种插件通常基于JavaScript编程语言,利用其强大的事件处理和DOM操作能力。 "Hammer.js...

    js按比例缩放图片且垂直居中显示图片

    "js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...

    js前端压缩、缩放图片分辨率,无需服务器,支持移动端

    如题,这个东西超牛逼,前端压缩、缩放图片,还支持在手机上运行,使用起来也很简单: lrz(filePath, { width: 285, height: 164, done: function (results) { img.src = results.base64; } }); filePath支持...

    js鼠标滚动缩放图片拖拽

    js鼠标滚动缩放图片 可拖拽,类似百度地图

    js实现图片等比例缩放

    在网页设计中,图片的等比例缩放是一个常见的需求,特别是在响应式布局中,为了保持图像的原始比例,避免拉伸或压缩导致变形,我们通常会利用JavaScript来动态调整图片大小。本文将深入探讨如何使用JavaScript实现...

    viewer.js图片缩放

    - `viewer('zoom', percent, isCursorPoint)`:缩放图片,percent为缩放比例,isCursorPoint指示是否以鼠标位置为中心。 5. **注意事项**: - 确保所有图片都设置了宽度和高度,以避免在预览时出现闪烁或布局问题...

    JavaScript实现网页图片等比例缩放 图片等比例缩放

    等比例缩放的基本思想是在缩放图片时保持其宽度和高度的比例不变。这意味着如果我们将图片的高度减小了一定的比例,那么宽度也需要按照相同的比例减小,反之亦然。这样做的目的是避免图片出现拉伸或压缩的情况,从而...

    纯HTML+js实现鼠标滚轮动态调整缩放图片大小

    纯HTML+js实现鼠标滚轮动态调整缩放图片大小 演示效果: https://www.bilibili.com/video/BV1pS4y167wJ/

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

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

    基于 cropper.js 实现 前端图片裁剪、放大、缩小、移动 支持移动端和PC端

    `cropper.js` 是一个强大的 JavaScript 图片裁剪库,它支持在移动端和PC端进行图片的裁剪、放大、缩小和移动操作,极大地提高了用户体验。本教程将详细介绍如何利用 `cropper.js` 来实现这些功能。 首先,我们要...

Global site tag (gtag.js) - Google Analytics